CODEWITHSUNDEEP
jqueryclick
ChrisMJ
ChrisMJ

Reputation: 1620

jQuery .click() not functioning

I have built a <ul> list and it is being populated with <li id="subsitem"> from a jQuery function. I am trying to build a click function so that whenever one of those <li>'s is clicked, it disappears. I'm using the slideUp() function.

Here is my code:

$("#subsitem").click(function() {
  // Act on the event
  $(this).slideUp();
});

This doesn't work, yet when i change it to

$("li").click(function() {
  // Act on the event
  $(this).slideUp();
});

It works, but the only problem then is it works on all my <li>s. Anyone any tips?

update

Here is the code that is being used inside an .each()

$("#subs").append("<li><a href='#' class='subsitem'><div class='favicon'><img src='icon.png' width='16' height='16'></div>title</a></li>");

Upvotes: 1

Views: 727

Answers (3)

ChrisMJ
ChrisMJ

Reputation: 1620

Ok having used the jquery irc channel i managed to get the answer i was looking for.

I needed to use the .live() function. This is what my code now looks like

$("#subsitem").live('click',function(){
$(this).parent().slideUp();});

Upvotes: 2

Chris
Chris

Reputation: 579

What about doing something like:

$("#subsitem").click(function(){
    $(this).parent().slideUp();
});

To bind it to the parent <li> of the <a> that is clicked.

Upvotes: 1

Robert
Robert

Reputation: 21388

The problem is the first one is identifying by ID, which should be unique. You can change it to a class, and add the class to each li, to make it work.

$(".subitem").click(function() {
    // Act on the event
    $(this).slideUp();
});

Upvotes: 4

Related Questions