1

我正在学习 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>
4

1 回答 1

7

您需要为事件绑定后创建的元素指定可选selector参数：.on()

$('#tasks').on('click', 'li', function(evt){
    $(this).addClass('done');
});

直接来自 API 文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on(). 为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者document如果事件处理程序想要监视文档中的所有冒泡事件。在加载任何其他 HTML 之前，文档元素在文档中是可用的head，因此在此处附加事件是安全的，而无需等待文档准备好。

于 2013-02-08T06:13:18.573 回答