如何通过JavaScript动态添加onclick事件？

Question

我试图通过JS在循环中添加一些列表元素。每个元素<li>都包含<a>标记，现在我想在每个添加的<a>标记中添加onClick事件。我试着这样做：

liCode = '<li><a href="#">Text using variable foo: ' + foo + '</a></li>';
$('#list').append(function() {
    return $(liCode).on('click', clickEventOccurs(foo));
});

在clickEventOccurs中，我只是输出到控制台foo。它的工作方式很奇怪:当每个标记都添加到列表中时，这个事件只是在init上执行，但是单击<a>之后就什么都不执行了。如何使它以正确的方式工作-在clickEventOccurs中单击已执行的代码？

Answer 1

首先，您要分配的不是回调函数，而是函数评估的结果。正确的方式应该是这样的：

$('#list').append(function() {
    return $(liCode).click(function() {
        clickEventOccurs(foo);
    });
});

此外，在使用jQuery时，您可以使用事件委托的好处，并以这种方式使用.on方法：

$('#list').on('click', 'li', function() {
    return clickEventOccurs(foo);
});

Answer 2

on()很适合处理事件，即使是动态创建的元素也是如此。

$('body').on('click', '#list li', function(){
    clickEventOccurs(foo);
});

Answer 3

http://jsfiddle.net/lnplnp/uGJnc/

HTML：

<ol id="list">
  <li><a href="#">Text using variable foo: foovalue</a></li>
</ol>

JAVASCRIPT/JQUERY：

function appending(foo) {
    liCode = '<li><a href="#">Text using variable foo: ' + foo + '</a></li>';
    $('#list').append($(liCode));
}

$('#list').on('click', 'li', function() {
    return clickEventOccurs($("a", this).text());
});

function clickEventOccurs(v){
    console.log(v.split(":")[1].trim());
}

appending("foo1");
appending("foo2");
appending("foo3");