How to add onclick event in dynamicly add html code via JavaScript?

Question

I try to add some list element in loop via JS. Every element <li> contains <a> tag, now I want to add onClick event in every adding <a> tag. I try to do it so:

liCode = '<li><a href="#">Text using variable foo: ' + foo + '</a></li>';
$('#list').append(function() {
    return $(liCode).on('click', clickEventOccurs(foo));
});

In clickEventOccurs I just output to console foo. It works in strange way: this event performed just on init when every tag is adding to list, but after click on <a> doesn`t perform anything. How to make it works in proper way - on click performed code in clickEventOccurs?

Answer 1

Firstly, you are assigning not a callback function, but a result of function evaluation. In right way it should be like this:

$('#list').append(function() {
    return $(liCode).click(function() {
        clickEventOccurs(foo);
    });
});

Also, as you are using jQuery you might use benefits of events delegation and use .on method this way:

$('#list').on('click', 'li', function() {
    return clickEventOccurs(foo);
});

Answer 2

on() is good for handling events, even to elements which will be created dynamically.

$('body').on('click', '#list li', function(){
    clickEventOccurs(foo);
});

Answer 3

http://jsfiddle.net/lnplnp/uGJnc/

HTML :

<ol id="list">
  <li><a href="#">Text using variable foo: foovalue</a></li>
</ol>

JAVASCRIPT/JQUERY :

function appending(foo) {
    liCode = '<li><a href="#">Text using variable foo: ' + foo + '</a></li>';
    $('#list').append($(liCode));
}

$('#list').on('click', 'li', function() {
    return clickEventOccurs($("a", this).text());
});

function clickEventOccurs(v){
    console.log(v.split(":")[1].trim());
}

appending("foo1");
appending("foo2");
appending("foo3");

Answer 4

To pass a variable to that function you'll have to make a second anonymous one, otherwise your clickEventOccurs function will be called at assignment, not as a callback.

$('#list').append(function() {
    return $(liCode).click(function() {
      clickEventOccurs(foo)
    });
});