jQuery：按钮单击多次触发

Question

On my site I have multiple buttons and every button is loaded on the site twice through ajax from the same file.

Though my problem is that this event fires twice if the same button is loaded twice. Though it works fine if only one of the buttons is loaded.

My code:

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

Try

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

OR

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

event.stopPropagation()

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

event.preventDefault()

Description: If this method is called, the default action of the event will not be triggered.

Comment Response

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

Your buttons are not firing the ajax calls properly, they should all have unique id's (ie testbutton1, testbutton2, etc...) and really be having onclick triggers in jQuery like so:

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

Answer 3

Your code is a bit odd to me! That happens because every time you fetch HTML through AJAX call you bind new event handler to all buttons because of css class selector you use. To resolve this problem I have two suggestions:

1- use a bit more complecated PHP code to generate a random ( or some pattern ) ID for each button and just use that unique IDs to bind new event.

<?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- IF you do not like above solution just use jQuery live trigger out side your AJAX requets:

a. remove your onload script from buttons.php

b. add the following javascript code to your index.php

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

And every thing should be fine. jQuery live event takes care of every newly added element that selector and attaches event handler to it and gurantees that happens only once.

My personal choose is item no. 1

Answer 4

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() {
    // ...
});