類沒有被添加到點擊事件處理程序

我正在學習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>

來源

2013-02-08 jack blank

你需要指定that optional selector argument for .on()爲綁定在事件發生後創建的元素工作：

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

直接從API文檔：

事件處理程序只結合當前選定的元素;他們必須在您的代碼撥打.on()時在頁面上存在。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果新的HTML被注入頁面，選擇元素並在之後附加事件處理程序新的HTML被放置到頁面中。或者，使用委託事件來附加事件處理程序，如下所述。

委託事件的優點是，它們可以處理後代元素的事件，這些事件將在稍後添加到文檔中。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則該元素可以是document。在加載任何其他HTML之前，文檔元素在文檔的head中可用，因此在不等待文檔準備就緒的情況下在其中附加事件是安全的。

來源

2013-02-08 06:13:18

謝謝，我現在明白了。 –

類沒有被添加到點擊事件處理程序

回答

相關問題