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

Question

I'm creating n buttons dynamically with JS/jQuery and I'm dynamically adding a button click event.

The problem is that when the function AddImageInTagTest() is called it creates all the buttons and fires the click event, without me clicking any button.

The other issue is that when I click one of the buttons created dynamically the click event function doesn't fire.

How come?

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

I've changed and added and anonymous function in the click event, but nothing happends when I click.

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

I've modified the function call to:

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

Answer 1

The click event fires because you are calling the function instead of assiging the reference.

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

The () is calling the method. You would do that if the method you called would return a function to execute. In your case you want to assign a reference, so drop the () .

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

And you should not be replacing all of the html when you add new content. Use append() to add the new elements to the end. When you replace the html and rewrite it, you will be destroying elements and their event handlers. Appending will not do that.

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

---

If all that said, why not just use event delegation?

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

This will eliminate the need to add new events when you add new elements.