jQuery .click() not functioning

Question

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

Please show some HTML, and the jQuery code that does the populating. — Ken Redler
– Ken Redler, Commented Aug 17, 2010 at 2:03
You shouldn't place a <div> inside an <a>. As inline elements, <a> tags should only contain other inline elements. — Ken Redler
– Ken Redler, Commented Aug 17, 2010 at 2:30

Robert · Accepted Answer · 2010-08-17 01:59:05Z

4

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

answered Aug 17, 2010 at 1:59

Robert

21.4k9 gold badges57 silver badges67 bronze badges

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

2 Comments

ChrisMJ Over a year ago

i know the code works, because if i create another list on the same page with the li and class, then the code works fine, its almost like my first ul list is bugged

Robert Over a year ago

You need to append

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

for my code to work. The difference being the <li> having subitem as the class.

ChrisMJ · Accepted Answer · 2010-08-17 13:42:35Z

2

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

answered Aug 17, 2010 at 13:42

ChrisMJ

1,6205 gold badges21 silver badges27 bronze badges

2 Comments

Chris Over a year ago

Upon investigation, that is exactly what you needed to do :) Thanks for the update, can you accept your own answer?

ChrisMJ Over a year ago

Yea I will do, once it allows me

Chris · Accepted Answer · 2010-08-17 05:02:28Z

1

What about doing something like:

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

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

edited Aug 17, 2010 at 5:02

answered Aug 17, 2010 at 3:24

Chris

5794 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery .click() not functioning

update

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

update

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related