Проблема jQuery: функции не будут работать на вновь созданном элементе HTML

Question

У меня есть две функции: одна, которая создает новый <textarea>, когда нажимается кнопка, и вторая функция, которая выполняет действие, когда нажимается <textarea> (или размыт, изменяется и т. Д.), Которую выбирает вторая функция.элементы на основе имени класса.Кажется, что вторая функция работает только с теми совпадающими элементами, которые существовали, когда страница была загружена, но она не будет активирована ни на одном из вновь созданных <textarea> элементов.Может кто нибудь разобраться почему и как это исправить?Вы найдете код ниже.Благодарю.- Джейк

$('#add').click(function() {
    $(this).before("<textarea class='test'></textarea>")
})

$('.test').blur(function () {
    alert('just a test')
})

Answer 1

Созданная вами текстовая область не существует в то время, когда jQuery назначает действие элементам, помеченным классом .test. Вам понадобится функция live (), чтобы заставить работать так, как вам нужно.

$('.test').live('blur', function () {
    alert('just a test')
});

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

Answer 2

Вы можете связать его напрямую:

$('#add').click(function() {
    $(this).before("<textarea class='test'></textarea>").prev().blur(function () {
        alert('just a test');
    });
});

Или использовать метод jQuery .delegate() , чтобы поместить обработчик в родительский элемент #add.

$('#add').click(function() {
    $(this).before("<textarea class='test'></textarea>")
}).parent().delegate('.test','blur',function() {
    alert('just a test');
});

Это более эффективный подход, чем использование .live().