1

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

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

我的代码：

索引.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>

按钮.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>
4

4 回答 4

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()

说明：如果调用该方法，则不会触发事件的默认动作。

评论回复

索引.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>

按钮.php

<button class="testbutton">Button1</button>
<button class="testbutton">Button2</button>
<button class="testbutton">Button3</button>
<button class="testbutton">Button4</button>
于 2013-02-15T10:24:16.507 回答
0

One reason is that you bind the same event more than once, each bind count,
so, if this is the reason, you can solve it in this way: 

// unbind the same event, before you bind it,
$("xxx").unbind("click").bind("click", function() {
    // ...
});
于 2014-06-21T18:56:14.240 回答
0

你的代码对我来说有点奇怪！发生这种情况是因为每次通过 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 实时触发器：

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

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

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

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

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

于 2013-02-15T10:43:11.820 回答
0

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

$("#testbutton1").click(function(){
  // do ajax call here for button1           
});
于 2013-02-15T10:23:26.027 回答