Weird backfire of click handler with dynamic jQuery generated buttons

Question

Good day,

I have written a simple jQuery statement which should create some HTML buttons dynamically and link them to a click event handler. Unfortunately, every time I click on a certain created button, the even runs not once, but as many times as buttons were ever created. Any help on this issue would be very appreciated! Thank you!

My code is:

$(document).ready(function () {
    var i = 0;
    $('#start_button').click(function () {
        $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />"));
        $("#game_board").on("click", ".click-point", function (event) { 
            $(this).remove(); 
            $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); 
        });
    });
});

You should move the click handler of game_board out of the click handler of the start_button — Huangism, Mar 03 '14 at 20:42
I swear that I tried that earlier and the code stopped working altogether ... I probably put a wrong bracket or something ... Again, thank you so much! — tony.hegyes, Mar 03 '14 at 20:44
try it and if it does not work, update the question with the new code — Huangism, Mar 03 '14 at 20:44
One problem is that you're creating multiple buttons with the same id, once for each time you click the start_button. OOPS - my bad, the i is local to the function and continues to increment. — Jay Blanchard, Mar 03 '14 at 20:45

score 0 · Accepted Answer · edited May 23 '17 at 10:31

Move the game_board click handler out

$(document).ready(function () {
    var i = 0;
    $('#start_button').click(function () {
        $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />"));
    });

    $("#game_board").on("click", ".click-point", function (event) { 
        $(this).remove();
        $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); });
    });
});

EDIT: Just as an additional suggestion, creating id with numbers might not be a good idea. I had trouble with it at one point. You can read here can i have a div with id as number? You can easily rename the id to something like q_NUMBER or something similar

score 0 · Answer 2 · answered Mar 03 '14 at 20:43

You are setting a new click handler every time you append a new button, so that's why it's working more than once, and score is increasing more than one.

Just take out that click handler, this will fix the problem.

 $(document).ready(function () {
     var i = 0;
     $('#start_button').click(function () {
         $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />"));

     });
     $("#game_board").on("click", ".click-point", function (event) {
         $(this).remove();
         $('#current_score').text(parseInt($('#current_score').html(), 10) + 1);
     });
 });

score 0 · Answer 3 · answered Mar 03 '14 at 20:44

I think you're misunderstanding what .on() does. You only need to add the handler once. The fact that you're adding it over and over is why it's firing over and over.

When you add an event handler like this:

$('#game_board').on('click', '.click-point', function () {
    //...
});

You're not adding the handler to the .click-point element, you're adding it to the #game_board element. Events in the DOM "bubble up" from child elements to parent elements, so clicking on anything within #game_board will trigger this event. The second argument to the function, '.click-point', is a filter for those events so that jQuery knows to only execute this code when those bubble-up events originate from a .click-point element.

That way, even child elements which are added dynamically will still be caught by the handler, so new handlers don't need to be created. Thus, you only need to create the handler once on the parent element:

$(document).ready(function () {
    var i = 0;
    $('#start_button').click(function () {
        $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />"));
    });
    $("#game_board").on("click", ".click-point", function (event) {
        $(this).remove(); $('#current_score').text(parseInt($('#current_score').html(), 10) + 1);
    });
});

score 0 · Answer 4 · answered Mar 03 '14 at 20:52

Solved by moving game_board click handler out of the start_button click handler:

var i = 0;
$('#start_button').click(function () {
    $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />"));
});

$("#game_board").on("click", ".click-point", function (event) {
    $(this).remove();
    $('#current_score').text(parseInt($('#current_score').html(), 10) + 1);
});

http://jsfiddle.net/qabcv/

Weird backfire of click handler with dynamic jQuery generated buttons

4 Answers4