Динамически добавлять входные данные через jQuery, однако все входы jQuery не получают фокусное оформление?

Question

Я динамически добавляю входные данные в форму, когда пользователь нажимает на тег привязки, к которому привязано событие jQuery click.

$(".add-input").click(function() { 

    $("div.form-item").append(get_input()); 

}); 

выше функция успешно добавляет новые входы в форму, однако у меня есть еще одна функция JQuery, который добавляет стиль в настоящее время сфокусированного вход так:

$("input, textarea").focus(function() { 
    $(this).parent().addClass("cur-focus"); 
}); 

Эта функция отлично работает для входов, которые были кроме исходной формы, однако все динамически добавленные входы не имеют класса, добавленного вышеупомянутым обработчиком событий.

Оба этих обработчика событий находятся внутри функции $ (document) .ready.

Есть ли способ для динамически добавленных входов также привязываться к обработчику событий фокуса на входах?

Answer 1

Попробуйте это с помощью on или delegate.

Использование on JQuery 1.7+

$("form").on("focus", "input, textarea",function() { 
    $(this).parent().addClass("cur-focus"); 
}); 

delegate Использование старых версий

$("form").delegate("input, textarea", "focus", function() { 
    $(this).parent().addClass("cur-focus"); 
}); 

Answer 2

Да, используйте jQuery's .on() или .live() функциональность. Оба они автоматически присоединяют соответствующие элементы при их создании.

Answer 3

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

on версия:

$("body").on('focus','input, textarea', function() { 
    $(this).parent().addClass("cur-focus"); 
}); 

Для повышения производительности вместо body вы должны дать самый близкий элемент, который содержит все input и textarea

Answer 4

Попробуйте добавить обработчик событий.

http://api.jquery.com/bind/