如何通過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)
    });
});