Question

只要存在某种情况，我就在循环中创建相同的按钮，并且我想为这些按钮运行相同的jquery事件处理程序。

问题是事件处理程序仅适用于生成的第一个按钮。

我的按钮生成如下：

<?php while($row_c= mysqli_fetch_array($result_comments))
{ ?>
<button name="comment" id="comment" class="button_comment" value="Post">Post</button>
<?php } ?>

和jquery即时使用是这样的：

$('.button_comment').click(function()
{
    //some staff thats done here
});

应该做什么，以便事件处理程序适用于生成的所有按钮？谢谢

Answer 1

你的jQuery应该可行。请注意，您的按钮会形成无效的HTML / DOM：元素must be unique上的id。但是既然你也在使用一个类（它不一定是唯一的），那就是你在jQuery选择器中使用的那个，它可以工作：Live Example | Source

也许当你尝试它并且它无法正常工作时，你使用的是$("#comment").click(...)，因为id问题而不能正常工作。

Answer 2

Check in firebug: 

  var buttoncomments = $('.button_comment'); 
    console.log(buttoncomments); 


Bind the control in question to a variable so you're certain that it's that one you're working with. 

$('.button_comment').click(function()
 {
     var that = $(this);

Answer 3

“应该做什么，以便事件处理程序适用于生成的所有按钮？” 小提琴将是向我们展示问题背景的好方法;)

您的代码有效，因为它会将处理程序附加到具有'button_comment'作为css类的每个元素

您是否将此代码放入dom ready函数中？

$(function(){
    /* code here  */
});

您可以使用event delegation 这意味着您必须将事件侦听器附加到这些按钮的第一个共同祖先。当许多元素必须触发相同的例程时，这是一个很好的选择，如果它们中的一些可以通过AJAX添加到未来的DOM中（这使得页面不会附加到许多事件处理程序）

委托语法

// Event delegation
$( "#Ancestor").on("click", '.button_comment', function() {
    alert( $( this ).val() ); 
});

Answer 4

从您的PHP代码中删除ID。记住ID应该是独特的元素。另外，将您的jquery改为：

('.button_comment').click(function()
{
    //some staff thats done here
});

到

('.button_comment').on('click', function()
{
    //some staff thats done here 
});

on事件将执行你告诉它要做的事情，所以它在运行时几乎完成。如果您使用以前的代码，则该元素必须在页面加载时存在才能生效。

如何在循环中创建的多个按钮上使用相同的jquery函数？

4 个答案: