Adding click event to all selected elements

Question

I want to make it so that when you select (click) on an li element it toggles a class.I've tried:

$("li").click(function() {
    $(this).toggleClass("selected");
});

but nothing happens when I click the list item.

EDIT:

HTML:

<input type = "text" placeholder = "New category" id = "category">
<button type = "button" onclick ="addCategory()">Add</button><br>
<ul id = "list">
<li>School</li>
<li>Home</li>
<li>Fun</li>
</ul>

Rest of JS/jQuery:

function addCategory() {
    var category = $("#category").val();
    var list = $("#list");
    var li = $("<li>");
    list.append(li);
    li.append(category);
}
 $("li").click(function() {
     $(this).toggleClass("selected");
 });

Probably going to need more context here, as well as a more detailed description than "it doesn't work" — WillardSolutions, Jan 10 '17 at 14:14
Can you please provide your html please ? There is no reason that your code shouldn't work in the way you wrote it — Dipiks, Jan 10 '17 at 14:15
Wild guess: that code snippet resides inside the `` element and outside of `$(document).ready()`. — Frédéric Hamidi, Jan 10 '17 at 14:15
Nothing happens when I click the li element. inside the tags is plain text. Maybe it's because elements can be added via a text input field on the click of a button — Žiga Stupan, Jan 10 '17 at 14:19
@Žiga, then AKA's answer will probably work, although they don't bother explaining the reason why. — Frédéric Hamidi, Jan 10 '17 at 14:21
*" elements can be added via a text input field "* - pretty relevant information that you should have included. You're adding dynamic elements, so you need to use event delegation. See this: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Jan 10 '17 at 14:25
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Jan 10 '17 at 14:26

score 0 · Accepted Answer · edited Jan 10 '17 at 15:13

0

This will work See an example here jsfiddle. Jquery works on elements that are present while the event is registered. So we can trick the situation by registering the event on a element which is always present. So the event is registered properly for any li on the document.

  $(document).on('click', 'li', function(){
     $(this).toggleClass("selected");
});

edited Jan 10 '17 at 15:13

SamGhatak

1,487
1
16
27

answered Jan 10 '17 at 14:15

Ankit Agarwal

30,378
5
37
62

Don't know what you talking about. See here [link](http://jsfiddle.net/ank9803/h4JXs/5046/) – Ankit Agarwal Jan 10 '17 at 14:20
@AKA Because you don't know the HTML, you cannot say that _this will work_ – Dipiks Jan 10 '17 at 14:23
@AKA More importantly, you've not explained what you've added/changed to make it work and so why this would work vs the original code. Essentially this is a code-only answer, which is generally considered not-helpful on SO. – freedomn-m Jan 10 '17 at 14:27

score 0 · Answer 2 · answered Jan 10 '17 at 14:23

As you can see on this snippet I wrote for you, the code you paste here works:

$(document).ready(function() {
  $("#result").text($("#list").html());
  
  $("li").click(function() {
    $(this).toggleClass("selected");
    $("#result").text($("#list").html());
  });
});

ul li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>Click me 1</li>
  <li>Click me 2</li>
  <li>Click me 3</li>
  <li>Click me 4</li>
  <li>Click me 5</li>
</ul>
<hr>
<h3>Html code of the list</h3>
<pre id="result"></pre>

Are you correctly referencing jquery before your li subscribing to the click event ? Are you adding your li item dynamically ?

Adding click event to all selected elements

2 Answers2