我正在学习jQuery,我遇到了.on()事件处理程序的问题.我不知道为什么没有将类done添加到动态添加的新列表项中.任何援助将不胜感激.
的jsfiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
ul li{
list-style: none;
}
.done{
text-decoration: line-through;
color: red;
}
.green{
color:green;
}
</style>
</head>
<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);
});
//the problem is the code below//
$('#tasks li').on("click", function(evt){
$(this).addClass('done');
});
});
function addTask(textBox, evt){
evt.preventDefault();
var taskText = textBox.value;
$("<li>").text(taskText).appendTo('#tasks');
textBox.value = '';
};
</script>
<body>
<ul id = "tasks">
</ul>
<input type= 'text' id ='taskText'>
<input type = 'submit' id ="addTask" />
<div class = "green"> green text</div>
</body>
</html>
您需要为事件绑定后指定的元素指定可选selector参数.on():
$('#tasks').on('click', 'li', function(evt){
$(this).addClass('done');
});
直接来自API文档:
事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用时页面上
.on().要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.或者,使用委托事件来附加事件处理程序,如下所述.委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,或者
document如果事件处理程序想要监视文档中的所有冒泡事件.head在加载任何其他HTML之前,文档元素在文档的文档中可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪.
| 归档时间： |
|
| 查看次数： |
67 次 |
| 最近记录： |