单击li元素时的“奇怪”行为

"Odd" behavior when clicking on li elements

本文关键字：奇怪 行为 li 元素 单击      更新时间：2023-09-26

我正在尝试添加一个类来动态生成的<li>元素，但它有一个非常奇怪的行为。使用单个<li>它可以完美运行，但是在添加另一个元素后，将添加class属性而不加值。添加第三个<li>后，它将再次工作（基本上它仅在<li>元素的数量为奇数时才有效）。

var JSTasker = {
  updateTaskCounter: function() {
    var taskCount = $('div#tasks ul').children().not('li.completed').size();
    $('span#task_counter').text(taskCount);
  },
  sortTasks: function() {
    var taskList = $('div#tasks ul');
    var allCompleted = $(taskList).children('.completed');
    allCompleted.detach();
    allCompleted.appendTo(taskList);
  },
  updatePage: function() {
    this.updateTaskCounter();
    this.sortTasks();
  }
};
$(document).ready(function() {
  $('input#task_text').focus();
  $('form#add_task').on('submit', function(event) {
    event.preventDefault();
    var taskText = $('input#task_text').val();
    var taskItem = "<li>" + taskText + "</li>";
    $('div#tasks ul').append(taskItem);
    $('input#task_text').val(null);
    JSTasker.updatePage();
    $('div#tasks ul').on('click', 'li', function(event) {
      event.preventDefault();
      $(this).toggleClass('completed');
      JSTasker.updatePage();
    });
  });
});
h1,
h2,
ul,
li {
  margin: 0px;
  padding: 0px;
}
html {
  background: #333;
  font-family: 'Gill Sans Light', 'Helvetica', 'Arial';
  font-size: 90%;
}
body {
  width: 400px;
  margin: 10px auto;
  border: 1px solid #EEE;
  background: #F6F6F6;
  padding: 10px 20px;
}
fieldset {
  border: 2px solid #CCC;
  padding: 10px;
  margin: 10px 0px 0px 0px;
}
input[type=text] {
  width: 300px;
  padding-right: 20px;
}
input[type=submit] {} #tasks {
  margin: 20px 0px 0px 0px;
}
h2 {
  margin-bottom: 10px;
}
h2 span#task_counter {
  font-size: 80%;
  color: #999;
}
#tasks ul {
  list-style-type: none;
}
#tasks ul li {
  padding: 6px 10px 3px 20px;
  height: 1.6em;
}
#tasks ul li:hover {
  background: #FFF8DC;
  text-decoration: underline;
}
#tasks ul li.completed {
  background: url('icons/accept.png') no-repeat 0px 5px;
  text-decoration: line-through;
  color: #999;
}
.trash {
  float: right;
  padding: 2px;
}
.trash:hover {
  background: #F99;
  cursor: pointer;
}
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Tasker</title>
  <link rel='stylesheet' type="text/css" href='JSTasker.css' />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script src="JSTasker.js"></script>
</head>
<body>
  <h1>JSTasker</h1>
  <form id='add_task'>
    <fieldset>
      <legend>Add a Task</legend>
      <input type='text' name='task_text' id='task_text' />
      <input type='submit' name='add_button' value='Add' />
    </fieldset>
  </form>
  <div id='tasks'>
    <h2>Your Tasks <span id='task_counter'></span></h2>
    <ul>
    </ul>
  </div>
</body>
</html>

这是有问题的部分：

    $('div#tasks ul').on('click', 'li', function(event) {
        event.preventDefault();
        $(this).toggleClass('completed');
        JSTasker.updatePage();
    });

该应用程序基于本教程。

在

表单提交之外添加 onclick 处理程序，现在每次提交表单时都会初始化 onclick 事件。 但$().on()用于动态绑定，只需调用一次

$(document).ready(function() {
    $('input#task_text').focus();
  $('form#add_task').on('submit', function(event) {
    event.preventDefault();
    var taskText = $('input#task_text').val();
    var taskItem = "<li>" + taskText + "</li>";
    $('div#tasks ul').append(taskItem);
    $('input#task_text').val("");
    JSTasker.updatePage();
  });
    $('div#tasks ul').on('click', "li", function(event) {
      event.preventDefault();
      $(this).toggleClass('completed');
      JSTasker.updatePage();
    });
});

每次单击添加按钮时，您都将单击事件绑定到li。取出此代码，它将起作用。它适用于奇数个元素，因为它将绑定事件奇数时间。假设您添加了 3 个li秒，因此它将调用 Click 事件 3 次。第一次添加类，然后删除，然后再次添加类。但是它将失败偶数li，因为它将首先添加类，然后删除它。

var JSTasker = {
  updateTaskCounter: function() {
    var taskCount = $('div#tasks ul').children().not('li.completed').size();
    $('span#task_counter').text(taskCount);
  },
  sortTasks: function() {
    var taskList = $('div#tasks ul');
    var allCompleted = $(taskList).children('.completed');
    allCompleted.detach();
    allCompleted.appendTo(taskList);
  },
  updatePage: function() {
    this.updateTaskCounter();
    this.sortTasks();
  }
};
$(document).ready(function() {
  $('input#task_text').focus();
  $('form#add_task').on('submit', function(event) {
    event.preventDefault();
    var taskText = $('input#task_text').val();
    var taskItem = "<li>" + taskText + "</li>";
    $('div#tasks ul').append(taskItem);
    $('input#task_text').val(null);
    JSTasker.updatePage();
  });
  
  $('div#tasks ul').on('click', 'li', function(event) {
      event.preventDefault();
      $(this).toggleClass('completed');
      JSTasker.updatePage();
    });
});
h1,
h2,
ul,
li {
  margin: 0px;
  padding: 0px;
}
html {
  background: #333;
  font-family: 'Gill Sans Light', 'Helvetica', 'Arial';
  font-size: 90%;
}
body {
  width: 400px;
  margin: 10px auto;
  border: 1px solid #EEE;
  background: #F6F6F6;
  padding: 10px 20px;
}
fieldset {
  border: 2px solid #CCC;
  padding: 10px;
  margin: 10px 0px 0px 0px;
}
input[type=text] {
  width: 300px;
  padding-right: 20px;
}
input[type=submit] {} #tasks {
  margin: 20px 0px 0px 0px;
}
h2 {
  margin-bottom: 10px;
}
h2 span#task_counter {
  font-size: 80%;
  color: #999;
}
#tasks ul {
  list-style-type: none;
}
#tasks ul li {
  padding: 6px 10px 3px 20px;
  height: 1.6em;
}
#tasks ul li:hover {
  background: #FFF8DC;
  text-decoration: underline;
}
#tasks ul li.completed {
  background: url('icons/accept.png') no-repeat 0px 5px;
  text-decoration: line-through;
  color: #999;
}
.trash {
  float: right;
  padding: 2px;
}
.trash:hover {
  background: #F99;
  cursor: pointer;
}
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Tasker</title>
  <link rel='stylesheet' type="text/css" href='JSTasker.css' />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script src="JSTasker.js"></script>
</head>
<body>
  <h1>JSTasker</h1>
  <form id='add_task'>
    <fieldset>
      <legend>Add a Task</legend>
      <input type='text' name='task_text' id='task_text' />
      <input type='submit' name='add_button' value='Add' />
    </fieldset>
  </form>
  <div id='tasks'>
    <h2>Your Tasks <span id='task_counter'></span></h2>
    <ul>
    </ul>
  </div>
</body>
</html>

您的代码只能处理奇数个任务，因为每次提交表单时，您都会向每个<li>添加新的单击处理程序。这意味着当你有两个<li>时，你打电话toggleClass两次，但一无所获。您可以通过在toggleClass调用后向当前代码添加alert("hi")来确认这一点。

相关文章：