JQuery динамическое добавление проблемы полей формы

Question

Я использую следующий код для вставки дополнительных полей формы.

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

Я динамически отправляю значения полей в mysql, когда происходит событие размытия. Однако, когда это поле вставлено, оно не распознается, и событие размытия не возникает, когда в новые поля было введено какое-либо значение. Это связано с тем, что оригинальный обработчик событий размытия был настроен на готовом документе?

Как получить код jquery для обновления mysql, распознающий, когда дополнительные поля формы становятся видимыми после того, как инициализация готового документа уже завершена? Я пробовал различные события, основанные на DIV ID, но безрезультатно .....

Answer 1

Причина, по которой ваш код не работает для динамически добавляемых входных данных, заключается в том, что когда вы делаете что-то вроде:

$(selector).blur(myFunction);

jQuery просматривает каждый элемент, который соответствует selector в этой точке , и добавляет обработчик события, который запускается myFunction при возникновении события blur, которое происходит с элементом. Это означает, что любые элементы, которые соответствуют selector, добавленному после этой строки кода, не будут связаны.

Чтобы обойти эту проблему, jQuery представил живую функцию в 1.3. Как гласит документация:

Связывает обработчик с событием (например, щелчком) для всех текущих и будущих элементов. Может также связывать пользовательские события.

К сожалению, на данный момент jQuery не поддерживает событие blur с функцией live.

Ваши варианты тогда:

A) Запускайте код привязки каждый раз, когда добавляете новые входные данные.
B) Используйте плагин livequery , который основан на live и поддерживает размытие.

Лично я бы пошел с А.

Answer 2

Вы должны связать свои события, используя метод live ():

например:

$("input").live("blur", function() { ... });

Таким образом, любые поля, добавленные во время выполнения, будут связаны с обработчиком событий.

РЕДАКТИРОВАТЬ: как указано в комментариях, «размытие» не поддерживается, но есть плагин, который поддерживает это событие: http://plugins.jquery.com/project/livequery