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

我有这样一段代码：添加按钮动态 - 只有最后一个按钮是“点击”

$.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”点击（...）事件。其他按钮在点击/悬停时不起作用。例如，如果它添加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")); 
        }); 
       });

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

来源

2014-04-01 Radek Anuszewski

什么指定'类= “myButton的” '并使用'$（'。mybutton'）。click（function（）{}）' –

@MuraliMurugesan非常感谢，它几乎可以工作 - 它对点击事件作出反应，但仍然没有“ui-state-hover”在鼠标悬停按钮 - 除了最后一个按钮工作100％正确。 –

你使用jQuery UI按钮吗？如果是，在你的ajax调用的for循环之后使用$（'。mybutton'）。button（）。您需要为for循环中新创建的元素配置按钮插件。 '。.get（，function（）{for（..）{...} $（'。mybutton'）。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")); 
});

来源

2014-04-01 13:38:40

尝试现场活动：

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

来源

2014-04-01 13:23:41 Nick

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

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

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

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

这里是working example

希望这有助于:)

来源

2014-04-01 13:30:42 usbecko

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

回答

相关问题