Question

I am trying to append a li element to a list with a link that has custom click event… I am trying something like:

<div id="myid"><ul></ul></div>

$('#myid ul').append("<li><a href=''>Link</a></li>").click(function(){alert('hi')})

But the click event is on the li and not the a href. How do I fix this?

Answer 1

Actually, the click event handler is bound to the ul element.

How do I fix this?

Bind it to the a element:

$("<li><a href=''>Link</a></li>").find('a').click(function(event) {
    event.preventDefault(); // <-- if you don't want the browser follow the link
    alert('hi');
}).end().appendTo('#myid ul');

DEMO

Creating the link separately might be cleaner though:

$('<a />', {
    text: "Link",
    href: "",
    click: function() {/*...*/}
}).wrap('<li />').parent().appendTo('#myid ul');

Information about the methods used can be found in the jQuery API documentation.