Question

在我的网站上，我有多个按钮，每个按钮都通过同一文件中的ajax加载到网站上两次。

虽然我的问题是，如果同一个按钮加载两次，此事件将触发两次。如果只加载其中一个按钮，它可以正常工作。

我的代码：

的index.php

<div id="firstButtonContainer">
</div>

<div id="secondButtonContainer">
</div>

<script>

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    script.onload = function(){

        $.ajax({
            url: '/test/firstButtonContainer.php',
            success: function(msg) {
                jQuery('#firstButtonContainer').html(msg);
            }
        });

        $.ajax({
            url: '/test/secondButtonContainer.php',
            success: function(msg) {
                jQuery('#secondButtonContainer').html(msg);
            }
        });

    };document.body.appendChild(script);

</script>

buttons.php

<button class="testbutton">Button1</button>
<button class="testbutton">Button2</button>
<button class="testbutton">Button3</button>
<button class="testbutton">Button4</button>

<script>

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
script.onload = function(){



$(".testbutton").on("click", function(event){
  alert("this should only appear once");
});


};document.body.appendChild(script);

</script>

firstButtonContainer.php

<div id="buttons">
</div>

<script>
$.ajax({
    url: '/test/buttons.php',
    success: function(msg) {
        jQuery('#buttons').html(msg);
    }
});
</script>

secondButtonContainer.php

<div id="buttonsTwo">
</div>

<script>
$.ajax({
    url: '/test/buttons.php',
    success: function(msg) {
        jQuery('#buttonsTwo').html(msg);
    }
});
</script>

Answer 1

尝试

$(".testbutton").on("click", function(event){
  event.preventDefault();
  alert("this should only appear once");
});

或

$(".testbutton").on("click", function(event){ event.stopPropagation(); alert("this should only appear once"); });

event.stopPropagation()

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

event.preventDefault()

描述：如果调用此方法，则不会触发事件的默认操作。

评论回复

<强>的index.php

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function() { $.ajax({ url: 'test/firstButtonContainer.php', success: function(msg) { jQuery('#firstButtonContainer').html(msg); } }); $.ajax({ url: 'test/secondButtonContainer.php', success: function(msg) { jQuery('#secondButtonContainer').html(msg); } }); $(".testbutton").live("click", function(event) { event.preventDefault(); alert("this should only appear once"); }); }); </script> <div id="firstButtonContainer"> </div> <div id="secondButtonContainer"> </div>

<强> buttons.php

<button class="testbutton">Button1</button> <button class="testbutton">Button2</button> <button class="testbutton">Button3</button> <button class="testbutton">Button4</button>

Answer 2

你的按钮没有正确触发ajax调用，它们都应该有唯一的id（即testbutton1，testbutton2等等），并且真的在jQuery中有onclick触发器，如下所示：

$("#testbutton1").click(function(){
  // do ajax call here for button1           
});

Answer 3

你的代码对我来说有点奇怪！发生这种情况是因为每次通过AJAX调用获取HTML时，都会将新事件处理程序绑定到所有按钮，因为您使用的是css类选择器。要解决此问题，我有两个建议：

1-使用更复杂的PHP代码为每个按钮生成随机（或某种模式）ID，并使用该唯一ID绑定新事件。

<?php
$id = "btn_id_" . rand (100,1000);
?>
<buttom class='whatever' id='<?php echo $id; ?>'>

$("#<?php echo $id; ?>").on("click", function(event){
  alert("this should only appear once");
});

2-如果您不喜欢上述解决方案，只需在您的AJAX请求中使用jQuery live trigger：

一个。从buttons.php中删除你的onload脚本

湾将以下javascript代码添加到index.php

<script>
(".testbutton").live ( 'click', function () {
   alert ( "This happens only once!" );
});
</script>

每件事都应该没问题。 jQuery live事件处理每个新添加的元素，选择器和附加事件处理程序，并且只发生一次。

我的个人选择是项目编号。 1

Answer 4

一个原因是你多次绑定同一个事件，每个绑定计数，
所以，如果这是原因，你可以这样解决：

// unbind the same event, before you bind it,
$("xxx").unbind("click").bind("click", function() {
    // ...
});

jQuery：按钮单击触发器多次

4 个答案: