读书人

jquery中li元素的click事件为何不起作

发布时间: 2012-03-26 15:46:56 作者: rapoo

jquery中li元素的click事件为何不起作用
html代码:
<div class="searchContainer">
<input type="text" name="txtSearch" class="search_text"/>
<a href="#"><img src="Images/Small_pic/08.gif" style="border:1px solid #ccc" /></a>
<div class="completionList">
<ul> <!--用于显示搜索关键字列表-->
</ul>
</div>
</div>

jquery代码:
$(function () {
$("input:text").keyup(function () {
$("div.completionList ul").append("<li>animal</li>")
});
$("div.completionList ul li").click(function () {
alert("ok");
});
})

但是当写成:
$(function () {
$("div.completionList ul").append("<li>animal</li>");

$(".completionList ul li").click(function () {
alert("ok");
});
})
这样的代码就没问题, 前一个代码就有问题, 显示不出ok

本来是想实现一个类似autoComplete下拉菜单关键字搜索功能,当取得数据的时候便添加一个li元素到ul当中,但是li元素的click 事件不起作用, 点击它的时候总出不来alert 提示,不知道是哪里出了问题?

[解决办法]
动态添加的元素不能想你那样绑定事件(原因我也搞不懂)!你要对添加的元素绑定事件可以这样:
$("div.completionList ul").append("<li onclick='a()'>animal</li>");
试一下吧

[解决办法]
http://blog.csdn.net/xinhaozheng/article/details/5862109

$("div.completionList ul li").live('click',function () {
alert("ok");
});

读书人网 >JavaScript

热点推荐