调用的点击处理程序过多

Question

I am using the following function to dynamically populate a div with some text and a button using the array messages :

var populateMessages = function(messages){
    for (var index in messages){
        (function(){
            var id = index;
            $("#messages").append(messages[index]["title"])
            $("#messages").append("<button>Open</button><br/>").click(function(){console.log(message["id"])})
        }())
    }
};

This code correctly populates the div with the text and the button. The problem is that if I click on ANY of the buttons, the click handlers for ALL of them fire. So with two buttons, it should log "0" if I click on the first one and "1" if I click on the second. Instead, if I click on either, it logs "0 1"

I'm not super up on Javascript so I don't know what the issue is.

Answer 1

The return value of

$("#messages").append("<button>Open</button><br/>")

is #messages , not the button that was added. So each time through the loop you're adding another click handler to #messages , not the button.

Try:

$.each(messages, function(index, message) {
    $("#messages").append(message.title);
    $("<button>Open</button>").click(function() {
        console.log(message.id);
    }).appendTo("#messages");
    $("#messages").append("<br/>");
});

Answer 2

$("#messages").append("<button>Open</button><br/>")

Returns #messages not button so you are setting the click event to #message .

Try this:

$("#messages").append("<button>Open</button><br/>").find("button:last").click(/blabla/)