$(this）.addClass不起作用

$(this).addClass is not working

本文关键字：addClass 不起作用 this      更新时间：2023-09-26

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

下面的示例是这样工作的，若将一些字符串添加到文本框中，然后单击按钮，则会将一个新项目添加到列表中。如果单击了列表中的项目，则应该对其进行笔划处理。

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

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

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

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

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

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

正如ceejayoz所提到的。live()函数在jQuery1.7中被删除，在jQuery2.x中根本不存在。

你点击列表不起作用的原因可以更好地解释这个问题：使用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" />

相关文章：