jQuery callback running multiple times

Question

I have a jQuery function that prompts for user input which has a callback function to append the text as a new item in a select element onscreen. The problem is that the callback is running multiple times (see below)

The getText() method shows a custom popup with an input element:

function getText(c, cb, elem) {
    var cb = cb || false;
    var elem = elem || false;

    $("#lims_gettext_caption").html(c);
    $("#lims_gettext").show();
    $("#lims_gettext_respond").click(cb);

    $("body").keyup(function(e){
        if (e.keyCode == 27) {
            $('#lims_gettext').hide();
            $("body").unbind("keyup");
        }   
    });
}

getText() is called from a separate method, which runs when the user clicks a specific link on screen:

function PrepareScanner(row) {
    var codes = $("#barcode" + row).size();
    var txt = (codes == 1 ? "first" : "next");

    getText("Please scan " + txt + " barcode", function() {
        var bc = $("#lims_gettext_value").val();
        $("#barcode" + row).append("<option value=1>" + bc + "</option>");
    });

    $("#lims_gettext_value").focus();
    $("#lims_gettext_value").val("");

    return;
}

What seems to happen is the first time it runs all is well, and a single item is appended to the list. When it runs a second time, TWO items are appended, when it runs the third time, THREE items are appended, and so on. The values of the items added are all correct (ie the value of the input box on screen), I just can't understand why the callback is running multiple times.

I'd appreciate any assistance. I've not been able to find anything that relates specifically to this problem on S.O already.

Thanks

Most likely the event is being bound multiple times. How many times is PrepareScanner executed? — user400654
– user400654, Commented Sep 16, 2013 at 20:08
Just the once as far as I can tell. <a href='javascript:void(0);' onClick='PrepareScanner(1);'>Scan</a> — pr.lwd
– pr.lwd, Commented Sep 16, 2013 at 20:10
Place an alert or console.log inside it to confirm. I dont see any other way that it would get called more than once. — user400654
– user400654, Commented Sep 16, 2013 at 20:25
Thanks Kevin I've figured it out. It was $("#lims_gettext_respond").click(cb); causing the problem as it was being called (and therefore rebound) every time the link was clicked. So your first comment was indeed correct. Thanks! (Can't answer my own question yet, too new to this place!) — pr.lwd
– pr.lwd, Commented Sep 16, 2013 at 20:43

pr.lwd · Accepted Answer · 2013-09-17 12:36:13Z

1

I've managed to figure it out (thanks Kevin B for your input)

It was the following line causing the problem, and had to be unbound in the callback function itself:

$("#lims_gettext_respond").click(cb);

So the adjusted PrepareScanner function is:

function PrepareScanner(row) {
    var codes = $("#barcode" + row).size();
    var txt = (codes == 1 ? "first" : "next");

    getText("Please scan " + txt + " barcode", function() {
        var bc = $("#lims_gettext_value").val();
        $("#barcode" + row).append("<option value=1>" + bc + "</option>");
        $("#lims_gettext_respond").unbind("click");
    });

    $("#lims_gettext_value").focus();
    $("#lims_gettext_value").val("");

    return;
}

answered Sep 17, 2013 at 12:36

pr.lwd

14012 bronze badges

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

Collectives™ on Stack Overflow

jQuery callback running multiple times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related