jQuery unordered list element click selector issue

Question

For a part of a web app view, the user enters in some data and it is added to an unordered list. For future modification, I want to have each list element selectable for edit and/or review.

HTML:

<div id = "answer_list_container">
  <ul id = "answers">
    <li id = "answer_1" class = "answer">Answer1 Text</li>
    <li id = "answer_2" class = "answer">Answer2 Text</li>
  </ul>
</div>

However, I can't get right selector for the list element. I've tried

$("#answers > li").click(answerSelectionHandler);
$(".answer").click(answerSelectionHandler);
$("#answers li").click(answerSelectionHandler);

answerSelectionHandler contains a console.log call that fires on execution of the handler. It is not going off, which suggest a selector issue.

Is the console.log at the top of the function?

MDEV
– MDEV

2013-08-01 15:23:23 +00:00
Commented Aug 1, 2013 at 15:23 — MDEV
– MDEV, Commented Aug 1, 2013 at 15:23

Anton · Accepted Answer · 2013-08-01 15:23:38Z

6

I'm guessing the li elements are added dynamically so you need to delegate on the closest static parent element like this

$('#answers').on('click','.answer',function(){
   answerSelectionHandler();
});

answered Aug 1, 2013 at 15:23

Anton

32.6k5 gold badges47 silver badges54 bronze badges

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

1 Comment

Jason Over a year ago

I forgot about on(), since I was so used to using click(). Too bad the standard event functions don't have implicit functionality of on()

Collectives™ on Stack Overflow

jQuery unordered list element click selector issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related