动态添加按钮 - 仅"clickable"最后一个按钮

Question

我有这段代码：

$.get(path + "/messages/getMyReceivedMessages", "userid=" + loggedUser.id ,function(data){
                    for (var i=0, dataLength=data.length; i<dataLength; i++){
                    $("#receivedMessagesDialog").html($("#receivedMessagesDialog").html() 
                         + '<button id=buttonMessage'+ i.toString() + '>' + data[i].content + 
                           '</button><br>');
                     $("#buttonMessage"+i.toString()).button();
                     $("#buttonMessage"+i.toString()).click(function(){
                        alert("przycisk " + $(this).prop("id")); 
                     });
                    }
                 });

它

应该是一个带有按钮的对话框，一切正常，按钮是动态添加的（例如，它添加了 3 个带有文本"A"和"B"和"C"的按钮），但有一个问题 - 只有最后添加的按钮是"可点击的"，只有鼠标悬停上的最后一个有类"ui-state-hover"并具有绑定 click（...） 事件。其他按钮在单击/悬停时没有反应。例如，如果它添加 3 个按钮"A"、"B"和"C"，则只有"C"按钮在单击/鼠标悬停在他身上时做出反应。我做错了什么吗？我会很高兴有人试图帮助我 - 提前谢谢你。

已解决，解决方案：我应该使用这个：

$.get(path + "/messages/getMyReceivedMessages", "userid=" + loggedUser.id ,function(data){
                    for (var i=0, dataLength=data.length; i<dataLength; i++){
                        $("#receivedMessagesDialog").html($("#receivedMessagesDialog").html() 
                         + '<button id=buttonMessage'+ i.toString() + ' class="dynButton">' + data[i].content + 
                           '</button><br>');
                    }
                    $(".dynButton").button();
                    $(".dynButton").click(function(){
                        alert("button " + $(this).prop("id")); 
                     });
                 });

我应该在与类循环后使用 button（） 初始化按钮，而不是使用 ID 循环初始化它。

Answer 1

指定一个类并应用 click， button（）

for (var i=0, dataLength=data.length; i<dataLength; i++){
       $("#receivedMessagesDialog").html($("#receivedMessagesDialog").html() 
             + '<button class="mybutton" id=buttonMessage'+ i.toString() + '>' + 
                   data[i].content +'</button><br>');
}
 //do it here
 $(".mybutton").button();
 $(".mybutton").click(function(){
    alert("przycisk " + $(this).prop("id")); 
 });

Answer 2

尝试直播活动：

$(document).on('click', "#buttonMessage"+i.toString(), (function(){
      alert("przycisk " + $(this).prop("id")); 
});

Answer 3

您可以将事件侦听器附加到包含按钮的元素。并指定按钮：最后。它将注意只有最后一个按钮是可点击的。

$('.container').on('click', 'button:last', function(){
    alert('click'); 
});

在您的具体情况中，您可以将事件侦听器附加到对话框。

$('#receivedMessagesDialog').on('click', 'button:last', function(){
    alert('click'); 
});

这是工作示例

希望这对:)有所帮助