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

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

4 个答案: