User-defined callback function is being fired multiple times in Javascript/jQuery

Question

There are some similar questions, but they all seem like regarding native jQuery callback functions.

So I have this code which (live) creates a div containting some form elements. Values of these elements should be retrieved inside a callback function when (before) the div is removed.

function popup(callback) {
    // ...
    // before removing the div
    callback.call();

    // remove div
}

Unexpectedly, the callback function is being fired multiple times (increasingly) after the first time popup is executed.

I have simplified the code, and here is the fiddle.

That's because you are binding a new event handler whenever popup is executed. — Felix Kling
– Felix Kling, Commented Feb 12, 2013 at 11:03

spiritwalker · Accepted Answer · 2013-02-12 10:57:18Z

1

I hope this is what you need.

function popup(callback) {
    $("body").append('<div><span id="test">test</span> <a href="#" id="close">close</a></div>');
    $(document).on("click", "#close", function() {
        callback.call();

        //
        //callback = function() {};
        $(document).off("click", "#close");
        $("div").remove();

    });
};

$(document).on("click", "#open", function() {
    popup(function() {
        alert('$("#test").length = ' + $("#test").length);
    });
});

Basically, you need to remove event handler by invoking off() method.

answered Feb 12, 2013 at 10:57

spiritwalker

2,26715 silver badges9 bronze badges

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

Comments

Kevin Bowersox · Accepted Answer · 2013-02-12 10:57:04Z

0

Try dynamically generating the elements instead of using a string. This will allow you to bind events easier.

function popup(callback) 
{   var $elem = $("<div></div>");
    $elem.append($("<span></span>").html("test"));
    $elem.append(" ");
    $elem.append($("<a></a>").html("close").attr("href", "#"));

    $("body").append($elem);
    $elem.find("a").click(function() {
        callback.call();  
        $elem.remove();
    });
};

$(document).on("click", "#open", function() {
    popup(function() {
        alert('$("#test").length = ' + $("#test").length);
    });
});

Example: http://jsfiddle.net/4se7M/2/

answered Feb 12, 2013 at 10:57

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

1 Comment

user1643156 Over a year ago

sorry but your fiddle returns 0 all the time, should be 1 instead.

Salman · Accepted Answer · 2013-02-12 11:07:46Z

0

I don't know the exact scenario, but why do you want to bind and unbind the event each time you show the popup?

You can bind only once, like this, can't you?

$(document).on("click", "#close", function() {
    alert('$("#test").length = ' + $("#test").length);
    $("div").remove();
});

function popup() {
    $("body").append('<div><span id="test">test</span> <a href="#" id="close">close</a></div>');
};

$(document).on("click", "#open", function() {
    popup();
});

answered Feb 12, 2013 at 11:07

Salman

9,4676 gold badges42 silver badges74 bronze badges

1 Comment

user1643156 Over a year ago

In the actual code, popup is called within another function, there are some other values that need to be passed to function popup. When the popup is closed, there are some generated data need to be passed back and dealt with. So it can't be that straight. Anyway, I'v got the answer from spiritwalker.

Collectives™ on Stack Overflow

User-defined callback function is being fired multiple times in Javascript/jQuery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related