如何通过JavaScript动态添加HTML代码中的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");

Answer 4

要将变量传递给该函数，您必须创建另一个匿名函数，否则您的clickEventOccurs函数将在分配时被调用，而不是作为回调。

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