Question

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

Answer 1

您需要指定that optional selector argument for .on()以适用于事件绑定后创建的元素：

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

直接来自API文档：

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

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

未在click事件处理程序中添加类

1 个答案: