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

如果您事先不知道该元素何时会添加到DOM中，live或on将是更好的选择。

Answer 3

改变这个 -

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

到此 -

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

live文档。

修改

自jquery 1.7起，live已被弃用。请改用on -

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

on文档。

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

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

5 个答案: