Question

代码为每个选项卡生成HTML + JS。现在在每个选项卡上我有两个使用PHP在HTML中生成的按钮。它还使用JQuery为每个按钮生成了Javascript onclick事件。

这是生成的每个按钮的jquery click事件：

    <script type="text/javascript">
    $(function() {
        $(document).on("click", ".mybutton", function(e) {
            e.preventDefault();
            alert($(this).attr('whoami'));
            return false;
        });
    });
    </script>'

现在由html生成的两个按钮具有以下结构：

<button type="button" class="mybutton" whoami="button_1">First Button</button>
<button type="button" class="mybutton" whoami="button_2">Second Button</button>

现在html和JS都生成很好我看到两个按钮都很好，没有任何JS错误。我可以点击两个按钮，但这是发生的事情：

当我点击第一个按钮时，它会提示以下内容：

 button_1
 button_2

两个按钮点击都会执行，因为它们具有相同的类名。如何防止两个按钮被执行？我只需要执行单击按钮而不是所有按钮。

我尝试添加 e.stopImmediatePropagation（），这就是：

当我点击第一个按钮时我得到正确的警告它只执行button_1点击，但是当我点击第二个按钮时它只执行button_1点击事件而不是button_2。

请帮忙。

注意： 我认为它同时执行的原因是因为有2个javascript部分被附加到html并且两个脚本都在 .button 上有点击事件但是我无法更改此代码我需要以某种方式确保只有点击按钮被执行。

Answer 1

不确定定位文档点击是否是您要在此处执行的操作。不使用的原因是什么：

$('.mybutton').on('click', function() {
  /* YOUR CODE HERE */
});

如果不将文档的大型上下文强制转换为事件监听器，这将完成您所需的工作。

Answer 2

为特定按钮而不是click点击发送$(document)事件。

 <button type="button" class="mybutton" id="button_1">First Button</button>
 <button type="button" class="mybutton" id="button_2">Second Button</button>

JavaScript代码应该是： -

 $('#button_1').click(function(){
    //write your code here     

  }) 

  $('#button_2').click(function(){
    //write your code here     

  })

或者您也可以通过班级名称

来完成

  $('.mybutton').click(function(){
     var idval = $(this).attr('id');
     alert(idval);

    //on the basis of particular id you can perform desired operation here

  })

Answer 3

如果动态生成按钮，您可能需要使用当前使用的事件委托模式：

$(document).on("click", ".mybutton", function(e) {...})

更多关于“直接和委派活动”的内容：http://api.jquery.com/on/

您确定没有其他代码在运行吗？你的代码看起来很好，就像这个小提琴一样：http://jsfiddle.net/8e3Gp/

Answer 4

不使用whoami作为属性，您可以使用id，这将是一个更好的主意。对于按钮的单击事件，您只使用它们都具有的共享className选择按钮集合，并将clickhandler应用于该按钮，然后$（this）将是单击的特定按钮。因为你已经在做e.preventDefault（）。

，所以不需要返回false

$(function(){
  $('.mybutton').on('click', function(e){
     e.preventDefault();
     alert($(this).attr('id'));
  });
});

<button type="button" class="mybutton" id="button_1">First Button</button>
<button type="button" class="mybutton" id="button_2">Second Button</button>

Answer 5

解决方案如下：

$(".mybutton:not(.bound)").addClass("bound").on("click", function(e) {
   e.preventDefault();
   alert("hello");
   return false;
});

仅提醒你1次而不是2次。

只需单击一下即可执行JQuery三个按钮单击事件

5 个答案: