2011-05-09 105 views
1

我很難看到我的代碼有什麼問題。我試圖選擇我的列表項,但他們似乎沒有被選中。jQuery選擇列表項

這裏是我的HTML

<!DOCTYPE html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Tasklistr</title> 
    <style type="text/css"> @import url(styles.css);</style> 
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script> 
    <script type="text/javascript" src="application.js"></script> 
</head> 

<body> 
    <h1>JSTasker</h1> 

    <form> 
    <fieldset> 
     <legend>Add a Task</legend> 
     <input type='text' name='task_text' id='task_text' /> 
     <input type='submit' name='add_button' value='Add' id='add_button' /> 
    </fieldset> 
    </form> 

    <div id='tasks'> 
     <h2>Your Tasks </h2> 
     <ul> 
     </ul> 
    </div> 
</body> 
</html> 

我的application.js

$(document).ready(function() { 
    $('input#add_button').click(function(event) { 
     event.preventDefault(); 
     var task_text = $('input#task_text').val(); 
     var task_item = "<li><p>" + task_text + "</p></li>" 
     $('div#tasks ul').append(task_item); 
     $('input#task_text').val(null); 
    }); 

    $('input#task_text').focus(); 

    $('div#tasks ul li').click(function() { 
     alert("Hey"); 
    }); 



}); 

回答

3

您應該使用.live()代替.click()

您目前正在綁定一個click事件到綁定時不存在的DOM元素(因爲您是通過單擊按鈕來添加它們的)。 live()解決了這個問題:通過此方法綁定的事件也適用於在調用live()後創建的元素

例子:

$('div#tasks ul li').live('click', function(){ 
    alert("Hey"); 
}); 
+0

拍我....這麼快 – diEcho 2011-05-09 11:08:56

+0

工作示例:http://jsbin.com/oneru3/4 – Cheeso 2011-05-09 11:09:08

+0

作品。謝謝阿隆。 – Josh 2011-05-09 11:14:41