click event fires multiple times issue, how to?

Question

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.com/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

Calceiform

Have you tried using keyup() instead of click()? – Respite

I had the same issue, then i changed .on to .bind, and issue was resolved – Harvin

Why are you adding a new event handler to the document every time you click el ? – Theme

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? – Chaffee

i edited my question and added an example – Calceiform

Check the updated fiddle jsfiddle.net/MKg6p/1 – Improvisatory

@harsha it worked. thanks. can u update ur response so i can check it as valid? – Calceiform

Answer 1

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());
    });
}

Improvisatory

this solution will unbind my first $(el).on('click' ... – Calceiform

doesn't seem to have an effect – Calceiform

Do you mean that the click is still getting triggered multiple times? – Improvisatory

@Calceiform : Try the second method. And as Adeneo suggested , avoid bind clicks to the document 'n' number of times – Improvisatory

your last edit changes my script a bit, $(this) is not the element, but the document. and i have to use $(document), otherwise i can't get the element – Calceiform

Answer 2

Try to give all the buttons a unique id.

Chu

Does that mean you have multiple elements with the same id? – Chu

Answer 3

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.

Amethyst

Sure. I had some trouble interpreting your code (you could make things more clear by selecting (and setting) id's). I think this is what you need: jsfiddle.net/c_kick/3LRBX – Amethyst