Question

我想这样做，以便当你选择（点击）一个li元素时，它会切换一个类。我已经尝试过：

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

但单击列表项时没有任何反应。

编辑：

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>

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

Answer 1

这会奏效请参阅此处的示例jsfiddle。 Jquery适用于注册事件时存在的元素。因此，我们可以通过在始终存在的元素上注册事件来欺骗这种情况。因此，li上的任何document都可以正确注册该活动。

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

Answer 2

正如您在我为您写的这段代码中所看到的，您在此处粘贴的代码有效：

＆＃13;

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

＆＃13;

ul li {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

在你订阅点击事件之前，你是否正确引用了jquery？您是否动态添加li项目？

将click事件添加到所有选定元素

2 个答案: