$(this).addClass 不起作用答案

【问题标题】：$(this).addClass is not working$(this).addClass 不起作用
【发布时间】：2016-01-11 02:21:50
【问题描述】：

在学习教程时，我看到样式表未应用于列表中单击的元素。可能的原因是什么？

如果将一些字符串添加到文本框然后单击按钮，则以下示例会以这种方式工作，新项目将添加到列表中。如果单击列表中的项目，则应将其划过。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#taskText').keydown(function (evt) {  
                if (evt.keyCode == 13) {
                    addTask(this, evt);
                }
            });

            $('#addTask').click(function (evt) {
                addTask(document.getElementById('taskText'), evt);
            });

            // following statements not working 

            $('#tasks li').live('click', function(evt) {
                $(this).addClass('done');

            });});

        function addTask(textBox, evt) {
            evt.preventDefault();
            var taskText = textBox.value;
            $('<li>').text(taskText).appendTo('#tasks'); 
            textBox.value = "";
        };
    </script>
    <style type="text/css">
        .done{
            text-decoration:line-through;
        }
    </style>
</head>
<body>
   <ul id="tasks">
   </ul>
    <input type="text" id="taskText" />
    <input type="submit" id="addTask"/>

</body>
</html>

【问题讨论】：

尝试将$('#tasks li').live('click', function(evt) { $(this).addClass('done'); });});更改为$('#tasks li').on('click', function(evt) { $(this).addClass('done'); });});
非常感谢您的回复。试过但很遗憾，它没有用。

标签： javascript jquery html css web

【解决方案1】：

live() function 在 jQuery 1.7 中被删除，在 jQuery 2.x 中根本不存在。

如果您检查浏览器的开发者控制台，您很可能会看到一条错误消息。

【讨论】：

感谢您的回复。还有其他选择吗？
@Cchanchal 该文档链接的第一行是“使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。”
这已被标记为最佳答案？ @chanchal 你的问题解决了吗？

【解决方案2】：

正如 ceejayoz 所述。 live() function 在 jQuery 1.7 中被删除，在 jQuery 2.x 中根本不存在。

在这个问题上更好地解释了您单击列表不起作用的原因：Click event on dynamically generated list items using jquery

这就是代码的样子

$(document).ready(function() {
  $('#taskText').keydown(function(evt) {
    if (evt.keyCode == 13) {
      addTask(this, evt);
    }
  });

  $('#addTask').click(function(evt) {
    addTask($('#taskText'), evt);
  });


  $('#tasks').on('click', 'li', function(evt) {
    $(this).addClass('done');
  });
});

function addTask(textBox, evt) {
  evt.preventDefault();
  var taskText = textBox.val();
  $('<li>').text(taskText).appendTo('#tasks');
  textBox.val("");
};

.done {
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask" />

【讨论】：

【解决方案3】：

$('#tasks li').click(function(){
     $(this).addClass('class-name');
};

应该可以。检查以确保您的所有语法都是正确的（即没有随机分号）

【讨论】：

【解决方案4】：

 $(document).ready(function() {
   $('#addTask').click(function() {
     var taskText = $('#taskText').val();
     var li = $('<li>' + taskText + '</li>');
     $('ul#tasks').append(li);
     $('#taskText').val('');
     $(li).click(function() {
     $(this).toggleClass('done');
     });
   });
 });

li {
  font-family: arial;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}

.done{
   text-decoration: line-through;
   color: red;
}

<!DOCTYPE html>    
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
</head>    
<body>
  <ul id="tasks">
    <!-- List Goes Here... -->
  </ul>

  <!-- Textbox / Input Buttons -->  
   <input type="text" id="taskText" />
   <input type="submit" id="addTask"/>

</body>
</html>

【讨论】：

我尝试了建议的方法，但遗憾的是它不起作用。
尝试第二个，如果仍然不起作用。那么如果你不介意你可以在 codepen.io 中举例说明你的代码吗？
请在这里找到。
谢谢 Sam，它工作得很好，可能是什么原因导致我们必须在列表中添加默认元素而这个默认元素没有被删除？
没有理由添加默认的，我只是无缘无故地写了它。即使被删除，该程序仍然可以正常工作。