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