.append（）一个元素，单击（）不注册

Question

我试图向DOM添加一个元素，然后单击后使用此元素。 但是，我不认为下面的函数注册，因为这是一个自调用函数（位于HTML的末尾），并且仅在乞讨时运行。

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

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

})();

click事件处理程序不起作用。

谢谢

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);
    });
}); 

如果你事先不知道该元素何时被添加到DOM on那么live或on会是更好的选择。

Answer 3

改变这个 -

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

对此 -

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

实时文档。

编辑

截至jquery 1.7， live已被弃用。 使用on ，而不是-

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

在文档上。

jsFiddle演示。

请记住，如果要将事件处理程序绑定到动态生成的DOM元素，则需要使用live （不建议使用）或on 。

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

您正在关闭附加部分之后的函数，这就是为什么单击处理程序不起作用

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