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

admin管理员组

文章数量:1023078

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?

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?

• javascript
• html

Share Improve this question Follow edited Jul 29, 2013 at 9:32 Zaheer Ahmed 28.6k1212 gold badges7676 silver badges112112 bronze badges asked Jul 29, 2013 at 9:27 sphinkssphinks 3,12899 gold badges4242 silver badges5555 bronze badges 2

• You can add onclick="your_function()" to the <a> tag in the string. – 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 Commented Jul 29, 2013 at 10:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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);
});

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

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

http://jsfiddle/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");

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

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?

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?

• javascript
• html

Share Improve this question Follow edited Jul 29, 2013 at 9:32 Zaheer Ahmed 28.6k1212 gold badges7676 silver badges112112 bronze badges asked Jul 29, 2013 at 9:27 sphinkssphinks 3,12899 gold badges4242 silver badges5555 bronze badges 2

• You can add onclick="your_function()" to the <a> tag in the string. – 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 Commented Jul 29, 2013 at 10:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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);
});

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

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

http://jsfiddle/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");

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

本文标签： How to add onclick event in dynamicly add html code via JavaScriptStack Overflow