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, Aug 17 '10 at 02:03
You shouldn't place a `
` inside an ``. As inline elements, `` tags should only contain other inline elements. — Ken Redler, Aug 17 '10 at 02:30

score 4 · Answer 1 · answered Aug 17 '10 at 01:59

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 '10 at 01:59

Robert

21,110
9
55
65

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 – ChrisMJ Aug 17 '10 at 02:06
1

You need to append `$("#subs").append("
title
` having subitem as the class.

Robert

Aug 17 '10 at 02:24

score 2 · Accepted Answer · answered Aug 17 '10 at 13:42

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 '10 at 13:42

ChrisMJ

1,620
4
21
27

Upon investigation, that is exactly what you needed to do :) Thanks for the update, can you accept your own answer? – Chris Aug 17 '10 at 17:55
Yea I will do, once it allows me – ChrisMJ Aug 17 '10 at 19:24

Chris · Answer 3 · 2010-08-17T05:02:28.610

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 '10 at 05:02

answered Aug 17 '10 at 03:24

Chris

569
4
10

jQuery .click() not functioning

update

3 Answers3

Linked