0

代码为每个选项卡生成 HTML + JS。现在在每个选项卡上，我有 2 个使用 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上的单击事件，但我无法更改此代码，我需要以某种方式确保只有单击的按钮被执行。

4

5 回答 5

0

解决方案如下：

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

只提醒你好 1 次而不是 2 次。

于 2013-03-08T18:11:38.957 回答
0

您可以使用 id 而不是使用 whoami 作为属性，这将是一个更好的主意。对于按钮的单击事件，您只需使用它们都具有的共享 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>
于 2013-03-08T17:11:17.697 回答
0

不确定以文档点击为目标是您想要在此处执行的操作。不使用的原因是什么：

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

这将完成您正在寻找的内容，而无需将文档的更大上下文强制到事件侦听器中。

于 2013-03-08T16:21:50.610 回答
0

为特定按钮编写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

  })
于 2013-03-08T16:22:15.390 回答
0

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

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

有关“直接和委托事件”下的更多信息：http: //api.jquery.com/on/

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

于 2013-03-08T16:40:55.777 回答