jQuery: Button click triggers multiple times

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>

why are you loading them twice?

djjjuk
– djjjuk

2013-02-15 10:23:31 +00:00
Commented Feb 15, 2013 at 10:23 — djjjuk
– djjjuk, Commented Feb 15, 2013 at 10:23

Dipesh Parmar · Accepted Answer · 2013-02-15 11:23:03Z

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>

edited Feb 15, 2013 at 11:23

answered Feb 15, 2013 at 10:24

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

djjjuk Over a year ago

stopPropogation wont work in IE < 9 - that can be fixed with cancelBubble

Dipesh Parmar Over a year ago

@djjjuk then OP could just use the DOM click event and handle everything from there.

Dipesh Parmar Over a year ago

problem is inside first and second button container php file because from both files you are calling url: '/test/buttons.php' and in button.php file you assigning click event so event is assigning twice and hence its loading for two time... so all you need to do is clear first event n then add it again...

Dipesh Parmar Over a year ago

unbinding click event might also help $("#someid").unbind("click").bind("click",function(){...

Dipesh Parmar Over a year ago

excellent its doesn't matter if you use script.onload i just gave standard way of jQuery code... +1 for you..

|

Husman · Accepted Answer · 2013-02-15 10:23:26Z

0

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

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

answered Feb 15, 2013 at 10:23

Husman

6,93910 gold badges32 silver badges48 bronze badges

Comments

Boynux · Accepted Answer · 2013-02-15 10:43:11Z

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

Eric · Accepted Answer · 2014-06-21 18:56:14Z

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

answered Jun 21, 2014 at 18:56

Eric

25.8k26 gold badges168 silver badges232 bronze badges

Collectives™ on Stack Overflow

jQuery: Button click triggers multiple times

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related