.append () элемент, click () не регистрируется

Question

Я пытаюсь добавить элемент в DOM, а затем работаю с этим элементом, как только нажал. Тем не менее, я не думаю, что функция, представленная ниже, регистрируется, потому что это функция, вызывающая себя (расположена в конце HTML) и запускается только в начале.

 (function (){
    $('body').append('<span class="test">test</span>');
})

 $('.test').click(function(){
     console.log(this);
 });

})();

обработчик события щелчка не работает.

спасибо

Answer 1

Поскольку вы добавляете элемент динамически, вы можете использовать on() или связать событие click().

//Using on()

$('body').on('click', '.test', function(){
    // Bla
});


//Chaining click()

$('<span class="test">test</span>').click(function(){
    // Bla
}).appendTo('body');

Answer 2

или вы можете сделать это,

$(function() {
    $('body').append('<span class="test">test</span>');
    $('.test').click(function() {
        console.log(this);
    });
}); 

, хотя live или on будет лучшей альтернативой, если вы заранее не знаете, когда этот элемент будет добавлен в DOM.

Answer 3

Вы закрывали функцию сразу после добавления, поэтому обработчик кликов не работал

$(function() {
    $('body').append('<span class="test">test</span>');
    $('.test').click(function() {
        console.log(this);
    });
})(); 

Answer 4

В вашем примере кода вы закрываете функцию-оболочку после того, как span добавлен в тело. Если вы удалите строку }), ваш код будет работать нормально:

(function (){
  $('body').append('<span class="test">test</span>');
  // }) <- remove this line

  $('.test').click(function(){
    console.log(this);
  });
})();

Поскольку другие люди уже ответили, вы можете создать цепочку в jQuery, чтобы вы могли выполнить любое из этих действий, чтобы получить тот же результат:

function someFunction() {
  console.log(this);
}

// work from the span and attach a direct handler
$('<span class="test">test</span>').on('click', someFunction).appendTo('body');

// work from the body attaching direct handlers
$('body')
  .append('<span class="test">test</span>')
  .find('.test')
  .on('click', someFunction);

// work from the body attaching a delegate handler
$('body')
  .append('<span class="test">test</span>')
  .on('click', '.test', someFunction);

Answer 5

Изменить это -

$('.test').click(function()
{
    console.log(this);
});

к этому -

$('.test').live('click', function()
{
    console.log(this);
});

live документация.

EDIT

Начиная с версии 1.7, live устарел. Используйте on вместо -

$('body').on('click', '.test', function()
{
    console.log(this);
});

в документации.

jsFiddle демо.

Помните, что если вы хотите привязать обработчики событий к динамически генерируемым элементам DOM, вам нужно использовать либо live (устарело), ​​либо on.