在动态创建的元素上动态创建onclick事件

Question

I'm trying to make a dynamically created navigation in which every element can be clicked and sent somewhere (don't worry about that). Here's my fragment of code:

        var navigation = $('<ul></ul>');
        for(a = 0; a < no_of_elements; a++) {
            navigation_content = $('<li></li>').click(function { send_me_to(a) });
            navigation_content.appendTo(navigation);
        }
        navigation.appendTo('.container');

Everything was working just fine until I added .click(...) in the 3rd line. I also tried to split it into two lines, like so:

            navigation_content = $('<li></li>');
            navigation_content.click(function { send_me_to(a) });

...with no results, though. What is the proper way to bind click event to such elements? Thanks in advance!

Answer 1

In the function expression, you're missing the parenthesis () :

navigation_content = $('<li></li>').click(function() { send_me_to(a) });
//                                                ^^ missing

Answer 2

try this :

navigation_content.on('click',function(){
  send_me_to(a);
})

EDIT : Second solution:

 navigation_content = $('<li id="li-link-'+a+'" data-id="'+a+'"></li>')

after "navigation.appendTo('.container');" add this code

$('li[id^="li-link"]').on('click' , function(){
send_me_to($(this).data('id'));
});

cheers.

Answer 3

Not sure if the parentheses after the function keyword are mandatory, but the way you use a in the click handler will not have the result you expect. You could do something like that:

navigation_content.click((function(aa) {
    return function() { send_me_to(aa); };
})(a));

Answer 4

jsFiddle Demo

I believe the issue is probably with sending a . It is probably only sending the last one since it isn't closed over. There is also a syntax error, the anonymous click function needs () after it

var navigation = $('<ul></ul>');
for(a = 0; a < no_of_elements; a++) {
 navigation_content = new function(){
  var copya = a;
  return $('<li></li>').click(function() { send_me_to(copya) });
 };
 navigation_content.appendTo(navigation);
}
navigation.appendTo('.container');