Bri*_*ain 3 javascript jquery jquery-selectors
这就是我想要做的：我有一个输入字段，可用于将条目添加到待办事项列表中。在用户单击“添加”后，我使用 JQuery 显示条目的排序列表。我还使列表可排序（您可以使用 jQuery 通过鼠标拖动更改顺序。）现在我想在双击单个列表项时加粗。不知何故，我没有让 jQuery 选择正确的项目......
这是我的代码。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Tadum</title>
</head>
<body>
<h2>Tadum - The ToDo List</h2>
<h3>Enter New ToDos</h3>
<form id="addForm">
<input type="text" name="ToDoListItem"></input>
</form>
<div id="button">Add!</div>
<h3>Your ToDos</h3>
<ol class="todolist"></ol>
</body>
</html>
CSS：
.todolist li{
font-weight: normal;
}
.todolist {
font-family:garamond;
color:#cc0000;
}
Javascript
$(document).ready(function() {
$('#button').click(function(){
var toAdd = $('input[name=ToDoListItem]').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#addForm')[0].reset();
});
$('ol').sortable();
$('ol').css('cursor', 'pointer');
$('.todolist li').dblclick(function(){
$(this).css('font-weight', 'bold');
});
});
笔记：
不知何故，如果我将.list lijQuery 和 CSS 样式表中的ol. 然后双击显示列表中的所有项目（当然，这不是我想要的）。但不知何故，我无法弄清楚如何只选择<li>用 jQuery 双击的个人......
（我还尝试了很多变体。例如，仅使用“li”来选择双击的项目或使用“ol li”或“.item li”。它们都不起作用。）
您需要将dblclick事件处理程序绑定到新添加的列表项，如下所示：
$(document).on('dblclick', '.todolist li', function(){
$(this).css('font-weight', 'bold');
});
请注意，这不会切换样式，而只是在双击时使它们变粗。如果你再次双击它不会做任何事情。
另外，如果我可以建议对您的 JavaScript 代码进行一些其他更改：您的表单通常可以像任何其他表单一样提交，出于此目的，无论如何都要执行列表。<form>出于可访问性的目的，我还向 HTML 添加了一个标签。
$(document).ready(function() {
$('#addForm').submit(function(e){
e.preventDefault();
$('.todolist').append('<li class="item">' + $('#ToDoListItem').val() + '</li>');
$(this)[0].reset();
});
$('ol').sortable().css('cursor', 'pointer');
$(document).on('dblclick', '.todolist li', function() {
$(this).css('font-weight', 'bold');
});
});
HTML
<form id="addForm">
<label for='ToDoListItem'>Item:</label>
<input type="text" id="ToDoListItem" />
<button type='submit'>Add!</button>
</form>