Question

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

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

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

Answer 1

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

如果您查看浏览器的开发者控制台，则可能会在这些行中看到错误消息。

Answer 2

＆＃13;

 $(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');
     });
   });
 });

＆＃13;

li {
  font-family: arial;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}

.done{
   text-decoration: line-through;
   color: red;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

Answer 4

如ceejayoz所述。在jQuery 1.7中删除了live() function，在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" />

$（this）.addClass不起作用

4 个答案: