jQuery event firing twice after .load()

Question

I've come 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 common 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_income = $(this).val();
                    console.log(adjusted_gross_income);
                    // 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_income", function(){
console.log("mothers income 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!

Answer 1

add this line

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

before

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

Answer 2

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_income = $(this).val();
    console.log(adjusted_gross_income);
    event.stopPropagation();
    event.preventDefault();
});

Answer 3

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_income = $(this).val();
                console.log(adjusted_gross_income);
            });