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个按钮，文本＆＃34; A＆＃34;和＆＃34; B＆＃34;和＆＃34; C＆＃34;），但是有一个问题 - 只有最后添加的按钮是＆＃34;可点击的＆＃34;，只有鼠标悬停的最后一个按钮有＆＃34; ui-state-hover＆＃34;并绑定click（...）事件。其他按钮不会对点击/悬停做出反应。例如，如果它添加3个按钮＆＃34; A＆＃34;，＆＃34; B＆＃34;和＆＃34; C＆＃34;只有＆＃34; C＆＃34;按钮对点击/鼠标做出反应。难道我做错了什么？我会很高兴有人试图帮助我 - 提前谢谢你。

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

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

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

Answer 1

尝试直播活动：

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

Answer 2

您可以将事件侦听器追加到包含按钮的元素。并指定按钮：最后。只需点击最后一个按钮就可以了。

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

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

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

以下是working example

希望这会有所帮助：）

Answer 3

指定一个类并应用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")); 
 });

动态添加按钮 - 只有最后一个按钮是“可点击的”

3 个答案: