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?

You can add onclick="your_function()" to the <a> tag in the string. — MahanGM
– MahanGM, Commented Jul 29, 2013 at 9:33
but I can solve problem how to add to the tag onClick="my_function(foo)", where foo is the variable in JS. It showing me error in parsing. — sphinks
– sphinks, Commented Jul 29, 2013 at 10:53

Igor Dymov · Accepted Answer · 2013-07-29 09:30:33Z

4

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

answered Jul 29, 2013 at 9:30

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

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

2 Comments

sphinks Over a year ago

First code snippet works well, thanks, but now there is other problem, on aby element click I see value of foo as it was on last loop iteration, but not specific value foo every element. I even try to pass simply number of iteration var i, which increments on every iteration, but still on click I see only last value of i, but not value showing number of iteration on which this event was added to list element.

Igor Dymov Over a year ago

i'd suggest you searching for some information about JS closures, there's a bunch of similar questions even on StackOverflow

Daniel Apt · Accepted Answer · 2013-07-29 09:33:04Z

2

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

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

answered Jul 29, 2013 at 9:33

Daniel Apt

2,7181 gold badge25 silver badges36 bronze badges

Comments

Manu · Accepted Answer · 2013-07-29 10:32:32Z

1

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");

edited Jul 29, 2013 at 10:32

answered Jul 29, 2013 at 10:03

Manu

8191 gold badge10 silver badges30 bronze badges

Comments

Jivings · Accepted Answer · 2013-07-29 09:31:06Z

0

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

answered Jul 29, 2013 at 9:31

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related