选择<李>双击后使用jQuery
Selecting <li> item using jQuery after doubleclick
以下是我要做的:我有一个输入字段,可以用来将条目添加到待办事项列表中。我使用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');
});
});
注意:
不知何故,如果我用一个简单的ol
替换jQuery和CSS样式表中的.list li
,就会起作用。然后双击显示列表中的所有项目(当然,这不是我想要的(。但不知怎么的,我不知道如何只选择用jQuery双击的单个<li>
。。。
(我也尝试了一些变体。例如,只使用"li"来选择双击的项目,或者使用"ol li"或".item li"。它们都不起作用。(
您需要将dblclick
事件处理程序绑定到新添加的列表项,如下所示:
$(document).on('dblclick', '.todolist li', function(){
$(this).css('font-weight', 'bold');
});
请注意,这不会切换样式,只是在双击时使其变为粗体。如果你再次双击,它不会有任何作用。
此外,如果我可以建议对您的JavaScript代码进行一些其他更改:您的表单通常可以像任何其他表单一样提交,无论如何,出于这个目的,请列出待办事项。为了便于访问,我还在HTML <form>
中添加了一个标签。
$(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>
您在创建文档后添加li项。因此,您需要使用"on"方法,以便在之后触发对新创建项目的单击。
$(document).ready(function() {
$('#addForm').submit(function(e){
e.preventDefault();
var toAdd = $('#ToDoListItem').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#ToDoListItem').reset();
});
$('ol').sortable().css('cursor', 'pointer');
$(document).on('dblclick','li.item',function(){
$(this).css('font-weight', 'bold');
});
});
相关文章:
- 通过点击<李>在jQuery中
- 如何逃离<脚本>jquery html()中的标记.我使用了innerHTML和outerHTML来解决这个
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- Jquery在点击<a>标签
- 将jQuery从1.8更新到1.11<a>标记未附加
- 转换<a>使用jQuery将文本字符串转换为dom元素
- 在<头部>使用javascript/jQuery
- JS对象->来自jquery ajax的JSON提交->php迭代
- jQuery只隐藏<tr>在一张桌子上
- jQuery可读性:在<李>要素
- Jquery :gt(value) issue
- jquery仅限<并且>文本框中的符号
- jQuery/Javascript>on单击将文本放置在最后一个已知的光标位置
- 检查页面范围并提取<h1>内容(如果使用JQuery存在页面)
- 检测活动<李>用于jQuery转盘(分页)
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- jquery 1.8.0语法错误,无法识别的表达式:>
- jQuery复选框(在ul>li下)检查事件
- 硬币滑块jquery-->如何将100%width参数传递给它?似乎只允许图像的像素配置
- 动态显示隐藏表行使用jquery:gt