I have a button. when I click it I am appending some buttons to the DOM.

The issue I have is that those buttons that I am appending fire multiple times.

$(el).on('click', function (e) {
    key();
});

function key() {
    $(document).on('click', '#key li', function () {
        console.log($(this));
    });
}

First time key() is called, the console.log fires once

The second time I call key() the console.log fires twice

And so on

I've tried adding $(document).find('#key li').unbind('click'), but that doesn't seem to work

Any ideas?

edit:

Here is an jsfiddle example (shown below).

$('button').on('click', function () {
    $('.cont').remove();
    $('.container').remove();
    var html = '<button class="cont">click</button><div class="container">placeholder</div>';
    $('body').append(html);
    key();
});

$(document).on('click', '.cont', function () {
    var html = '<div id="but_placeholder"><button class="one">1</button><button class="two">2</button><button class="three">3</button></div>';
    $('.container').html(html);
});

function key() {
    $(document).on('click', '#but_placeholder button', function () {
        $('input').val($('input').val() + $(this).html());
    });
}

<script src=".1.1/jquery.min.js"></script>
<input type="text" id="input" />
<button>test</button>

I have a button. when I click it I am appending some buttons to the DOM.

The issue I have is that those buttons that I am appending fire multiple times.

$(el).on('click', function (e) {
    key();
});

function key() {
    $(document).on('click', '#key li', function () {
        console.log($(this));
    });
}

First time key() is called, the console.log fires once

The second time I call key() the console.log fires twice

And so on

I've tried adding $(document).find('#key li').unbind('click'), but that doesn't seem to work

Any ideas?

edit:

Here is an jsfiddle example (shown below).

$('button').on('click', function () {
    $('.cont').remove();
    $('.container').remove();
    var html = '<button class="cont">click</button><div class="container">placeholder</div>';
    $('body').append(html);
    key();
});

$(document).on('click', '.cont', function () {
    var html = '<div id="but_placeholder"><button class="one">1</button><button class="two">2</button><button class="three">3</button></div>';
    $('.container').html(html);
});

function key() {
    $(document).on('click', '#but_placeholder button', function () {
        $('input').val($('input').val() + $(this).html());
    });
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" />
<button>test</button>

To reproduce, click on the test button, then on the click,then one 1 2 3 and repeat the process

You will notice that the second time you go through the process the text doubles

• javascript
• jquery
• click
• bind
• unbind

Share Improve this question Follow edited Oct 23, 2017 at 22:54 jpaugh 7,06555 gold badges4444 silver badges9494 bronze badges asked Dec 22, 2013 at 20:18 PatrioticcowPatrioticcow 27.1k7676 gold badges221221 silver badges340340 bronze badges 7

• Have you tried using keyup() instead of click()? – James Craig Commented Dec 22, 2013 at 20:20
• I had the same issue, then i changed .on to .bind, and issue was resolved – Kiril Belah Commented Dec 22, 2013 at 20:22
• 3 Why are you adding a new event handler to the document every time you click el ? – adeneo Commented Dec 22, 2013 at 20:27
• user adeneo has already answered to your question. How to fix it? Delete function key() and put in console.log(). But that is not (most probably) what you want. Why don't you share some more code and explain what you want to achieve? – Anto Jurković Commented Dec 22, 2013 at 20:55
• i edited my question and added an example – Patrioticcow Commented Dec 22, 2013 at 21:20

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 6

Do this

function key() {
    $('#key li').unbind('click');
    $('#key li').bind('click', function () {
        console.log($(this));
    });
}

or you could do

function key() {
    $('#key').find('li').unbind('click');
    $('#key').find('li').bind('click', function () {
        console.log($(this));
    });
}

I guess the second one will surely work.

Updated method

function key() {
    $(document).off('click', '#but_placeholder button');
    $(document).on('click', '#but_placeholder button', function () {
        $('input').val($('input').val() + $(this).html());
    });
}

Try to give all the buttons a unique id.

Try setting the on on the document, that should do it, and will only bind once, including future (generated) elements. Eg:

$(document).on('click', '#key li', function() {
    //do stuff
});

The point is, you keep rebinding to the click event using the key() function. As you are binding the on event to the document, you don't need to wrap this in a function. Binding like this (my code above) will tell jQuery to bind the action (in my case '//do stuff') to every click event on a '#key li' it finds in the document. Wether it is there or not, wether there is one or there are many. I hope this explains it somewhat.

Fiddle

In my fiddle I modified your other code somewhat, and pre-wrap the inserted buttons as a jQuery object so you do not only append a button, but already set up actions on it.