Question

我正在用JS / jQuery动态创建n个按钮，我正在动态添加一个按钮点击事件。

问题是当调用函数AddImageInTagTest（）时，它会创建所有按钮并触发click事件，而不会单击任何按钮。

另一个问题是，当我单击其中一个动态创建的按钮时，点击事件功能不会触发。

怎么回事？

var count = 0;
function AddImageInTagTest(tagId, imageSrcPathAndimageFileName) {
    var fileNameWithExtension;

    fileNameWithExtension = imageSrcPathAndimageFileName.split("\\").pop(); //get just the filename with ext from the path
    $(tagId).html($(tagId).html() + "<img alt='' src='" +"\\" +imageSrcPathAndimageFileName +"'/>"+"<input id='Button"+count.toString()+"' type='button' value='delete image' />");
    $("#Button" + count.toString()).click(delete_image_custom());
    count++;
}

function delete_image_custom() {
    alert("Button is clicked");
}

我在点击事件中更改并添加了匿名功能，但点击时没有任何反应。

$("#Button" + count.toString()).click(function () { console.log("click event fired")});

我已将函数调用修改为：

$("#Button" + count.toString()).onClick(delete_image_custom); but nothing

Answer 1

点击事件会触发，因为您正在调用该函数而不是分配引用。

$("#Button" + count.toString()).click(delete_image_custom());
                                                         ^^

（）调用方法。如果您调用的方法将返回要执行的函数，则会执行此操作。在您的情况下，您想要分配引用，因此请删除()。

$("#Button" + count.toString()).click(delete_image_custom);

当你添加新内容时，你不应该替换所有的HTML。使用append（）将新元素添加到结尾。当你替换html并重写它时，你将破坏元素及其事件处理程序。追加不会那样做。

$(tagId).append("<img alt='' src='" +"\\" +imageSrcPathAndimageFileName +"'/>"+"<input id='Button"+count.toString()+"' type='button' value='delete image' />");

如果只说了，为什么不直接使用事件委托？

$("#CommonParentElement").on("click", ".commonClassOnButton", function(){    
    var button = $(this);
    console.log(button);
});

这将消除添加新元素时添加新事件的需要。

JS。以编程方式添加的Click事件，但在加载代码时仅触发一次

1 个答案: