How to avoid multiple loading of jQuery functions?

Question

I am using following code on my page which I am loading in ajax.

$(document).ready(function() {
    $('#button_id').click(function() {
      //Do Something          
    });
});

Now When I click on the button action happens multiple times. I know that its happening because I am loading the ajax page multiple times.

Please help me solve this.

Do you mean you click the button once, but it responds as if you clicked it several times? Or do you mean you want the action to only happen on the first click? — Blazemonger, Apr 23 '14 at 18:56
Why is that code on the page you are ajax loading in if the button exists on the page that is doing the loading? I consider it a bad idea to ever ajax load in a page that contains scripts without first stripping out said scripts before converting to a dom fragment or appending it to something. — Kevin B, Apr 23 '14 at 19:01
A cleaner solution would be to remove that code from the ajax loaded HTML and use one single event handler in the master page. — jfriend00, Apr 23 '14 at 19:15

score 5 · Answer 1 · answered Apr 23 '14 at 18:55

5

You can use .off() to remove existing listeners:

$(function() {
    $('#button_id').off('click').click(function() {
      //Do Something          
    });
});

answered Apr 23 '14 at 18:55

Wex

15,539
10
64
107

there is unbind like something as well, am i right? – Ehsan Sajjad Apr 23 '14 at 18:58
@EhsanSajjad - "As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements." (see: http://api.jquery.com/unbind/) – Wex Apr 23 '14 at 18:59

score 2 · Answer 2 · answered Apr 23 '14 at 19:33

If I am wrong about your implementation I apologize. Your problem may exist because the binding is created on first page load and then on subsequent ajax loads with new scripts being inserted and creating duplicate bindings. You should prevent any bindings from being generated on ajax loads to prevent duplicate bindings unless you are good with cleanup.

If the button you are clicking on exists in the ajax loaded area then you should use delegation to ensure that the click handlers still work.

For example:

$( "body" ).on( "click", "#button_id", function() {
    //do something
});

This will add a binding to the body element, but more specifically to the id #button_id. A click event on the button will propagate and bubble up to the body element (or whatever parent element you choose).

This makes it so that dynamic elements can be inserted in the DOM and only one event handler is needed to listen for it.

No need for .on() or .off() calls for individual ajax loads. This allows your bindings to be much cleaner.

Of course, if your button is not likely to exist on the page all the time then it would not be a good idea to keep extra bindings. Only create these types of binding if they are always needed to prevent optimization issues.

score 0 · Answer 3 · answered Oct 10 '17 at 05:21

0

A cleaner solution would be to remove that code from the ajax loaded HTML and use one single event handler in the master page

answered Oct 10 '17 at 05:21

Hafsul Maru

383
2
12

DD. · Answer 4 · 2014-04-23T19:06:27.033

-1

I guess your problem is the event is firing many times.

To fire only once try this:

$(document).ready(function() {
    $('#button_id').on("click",function(e) {
      e.preventDefault(); // This prevents the default non-js action (very used for anchors without links or hashes)
      e.stopPropagation(); // Prevent the bubling of the event and spread more times

      //Do Something          
    });
});

If doesn't work with e.stopPropagation(); try with e.stopInmediatePropagation();

Adding documentation for the last method I suggested. It could solve your problem. http://api.jquery.com/event.stopimmediatepropagation/

edited Apr 23 '14 at 19:06

answered Apr 23 '14 at 19:01

DD.

1,045
9
8

Neither `e.stopPropagation()` or `e.preventDefault()` stops other event click handlers attached to the same DOM object from firing. The OP needs to prevent from binding multiple event handlers for the same event. – jfriend00 Apr 23 '14 at 19:07
e.preventDefault wasn't intended to prevent firing more than once, that purpose was e.stopPropagation and e.stopInmediatePropagation... did you tried the last one? – DD. Apr 23 '14 at 19:09
If the OP's problem was that they were running `$('#button_id').on("click",function(e) {` more than once, then this won't solve the problem in any way. – jfriend00 Apr 23 '14 at 19:10
There is also another way to solve it for your specific case: Set up a var isAjaxExcecuting = false; then on click test if is true, if not, then excecute the code and change it to true... on ajax success, set up that var back to false. – DD. Apr 23 '14 at 19:11

How to avoid multiple loading of jQuery functions?

4 Answers4