I've e across an issue where jQuery events fire twice after $.load() is called. The event handler is placed in the load() callback function, and this seems to be the only place where events fire twice on the script.

I've tried adding event.stopPropogation() and event.preventDefault(), as these seem to be mon suggestions with jQuery events firing more than one. I'm not sure if my code is bubbling improperly or what. Any feedback would be helpful.

Here's an extract of some of the code where you see the behavior.

$("div.questions").load("question_source.php #simplified_a", function(){

                ...

                // Line 1
                $("#some_id").change(function(){
                    cantBeNegative(this);
                    adjusted_gross_ine = $(this).val();
                    console.log(adjusted_gross_ine);
                    // event.stopPropagation();
                    // event.preventDefault();
                });

You can clearly see the event firing twice with the console.log bit I've got in there. Any advice would be appreciated!

EDIT

OK, I checked through everything on the live page based on some of the suggestions, and there's definitely only one <div id="questions"> in existence when the problem is occurring. So, it doesn't appear to be an HTML problem.

I also checked to see if the event was actually being called twice, and as far as I can tell, the event is only being called once.

Now, I added a .on() event attached to the document which is called on the dynamically created elements, and that only fires once. .on() is not called within the .load() callback. Here's an example used on one of the other input boxes on the page which works without any problems:

$(document).on('change', "#SWA_mothers_ine", function(){
console.log("mothers ine changes from on()");
});

So, that works properly, but when tested on the same input within the .load() callback function, it fires twice, regardless of how it's called. So, it seems to me that it's almost certainly an issue with .load(). I wouldn't exactly call myself an expert in this, so if someone can figure out the issue, I'd love to know the answer. As it stands, I'm going to rewrite this code using .on().

SECOND EDIT

Adding $("#some_id").unbind('change'); before the 'change(function()) bit did the trick!

I've e across an issue where jQuery events fire twice after $.load() is called. The event handler is placed in the load() callback function, and this seems to be the only place where events fire twice on the script.

I've tried adding event.stopPropogation() and event.preventDefault(), as these seem to be mon suggestions with jQuery events firing more than one. I'm not sure if my code is bubbling improperly or what. Any feedback would be helpful.

Here's an extract of some of the code where you see the behavior.

$("div.questions").load("question_source.php #simplified_a", function(){

                ...

                // Line 1
                $("#some_id").change(function(){
                    cantBeNegative(this);
                    adjusted_gross_ine = $(this).val();
                    console.log(adjusted_gross_ine);
                    // event.stopPropagation();
                    // event.preventDefault();
                });

You can clearly see the event firing twice with the console.log bit I've got in there. Any advice would be appreciated!

EDIT

OK, I checked through everything on the live page based on some of the suggestions, and there's definitely only one <div id="questions"> in existence when the problem is occurring. So, it doesn't appear to be an HTML problem.

I also checked to see if the event was actually being called twice, and as far as I can tell, the event is only being called once.

Now, I added a .on() event attached to the document which is called on the dynamically created elements, and that only fires once. .on() is not called within the .load() callback. Here's an example used on one of the other input boxes on the page which works without any problems:

$(document).on('change', "#SWA_mothers_ine", function(){
console.log("mothers ine changes from on()");
});

So, that works properly, but when tested on the same input within the .load() callback function, it fires twice, regardless of how it's called. So, it seems to me that it's almost certainly an issue with .load(). I wouldn't exactly call myself an expert in this, so if someone can figure out the issue, I'd love to know the answer. As it stands, I'm going to rewrite this code using .on().

SECOND EDIT

Adding $("#some_id").unbind('change'); before the 'change(function()) bit did the trick!

• javascript
• jquery
• events

• 2 At a first glipse, have you considered the fact that there may be more than one div with class 'questions'? – Sebastian Neira Commented Sep 3, 2013 at 14:52
• Are you calling this code more than once so you are adding the event handlers multiple times? – epascarello Commented Sep 3, 2013 at 14:52
• try return false, which does the work of stopPropagation and preventDefault – Praveen Commented Sep 3, 2013 at 14:52
• You're binding the event twice. Therefore it is triggering twice. #some_id must not be getting replaced by the .load call. – Kevin B Commented Sep 3, 2013 at 14:56
• The above code will only fire once. There's something else at play here so we'll need to see the html. – Reinstate Monica Cellio Commented Sep 3, 2013 at 15:01

3 Answers 3

add this line

$("#some_id").unbind('change');

before

$("#some_id").change(function(){});

I'm not saying this will solve your problems but you need to pass in the event to reference it.

$("#some_id").change(function(event){
    cantBeNegative(this);
    adjusted_gross_ine = $(this).val();
    console.log(adjusted_gross_ine);
    event.stopPropagation();
    event.preventDefault();
});

It's possible that you have two divs with a class of 'questions', so you could be binding the change function twice.

If you update your change function to the below, this will unbind the change event before re-adding it. This will make sure you only have the function bound once;

            $("#some_id").unbind('change').change(function(event) {
                event.preventDefault();
                cantBeNegative(this);
                adjusted_gross_ine = $(this).val();
                console.log(adjusted_gross_ine);
            });