我无法看出我的代码出了什么问题。我正在尝试选择我的列表项,但它们似乎没有被选中。
这是我的 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");
});
});
最佳答案
您当前正在将 click
事件绑定(bind)到绑定(bind)时不存在的 DOM 元素(因为您是通过单击按钮添加它们)。 live()
解决了这个问题:此方法绑定(bind)的事件也适用于调用 live()
之后创建的元素。
示例:
$('div#tasks ul li').live('click', function(){
alert("Hey");
});
关于jQuery 选择列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5935916/