jquery - 附加DOM对象时触发JQuery单击事件

Question

所需功能：我有一个将新元素附加到页面的 JQuery 函数。这些新元素可以点击再次调用创建者函数，但不应在创建后立即调用点击函数。

问题：当函数被触发时，新元素被追加并且 on("click") 函数被递归地无限触发。

HTML：

<input type="button" value="test"/>
<div id="divContainer">

查询：

$('input[type=button]').click( function() {
    createDiv();
});

function createDiv(){
    $("<div id='innerDiv'>Div element</div>").appendTo("#divContainer").on("click", createDiv());
}

JsFiddle：http: //jsfiddle.net/uWXbA/

Obs：这不是真正的代码，它是问题本身的摘录。

Answer 1

这部分：

.on("click", createDiv())

正在调用createDiv()函数。您想传递对函数的引用，如下所示：

.on("click", createDiv)

或者，正如您在上面所说的，包装在匿名函数中也可以：

.click(function() {
    createDiv();
});

http://jsfiddle.net/QayWP/

Answer 2

尝试这个：

jQuery

function createDiv(){
    $("#divContainer").append("<div class='innerDiv'>Div element</div>");
    $(".innerDiv:last").click(function(){
        createDiv();
    });
}

您应该使用属性类而不是 id 添加 div，因为它可以重复。