页面如下,且每次点击li就能够弹出li里面的内容
<script>
$(function(){
$("#btn").bind('click',function(){
$.post("2.html",function(result){
$("#aaaa").append(result);
});
});
$("#aaaa>li").bind('click',function(){
alert($(this).html());
});
});
</script>
<input type="button" id="btn" value="点击" />
<ul id="aaaa">
<li>www.baidu.com</li>
<li>www.aspbc.com</li>
</ul>
我想通过点击按纽,ajax请求服务端2.html,获取的内容追加到aaaa后面
2.html的内容是
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>66666</li>
我希望的结果是,aaaa中追加了2.html中的内容。
我点击每个li,第一,第二个li能弹出li里面的内容(点击1,点击2),但新追加的内容不能弹出,也没有错误,新追加的li的onclick失效。
经过网上搜索了一下,找到解决办法:使用jquery on事件实现
以上的js代码改成如下
<script>
$(function(){
$("#btn").bind('click',function(){
$.post("2.html",function(result){
$("#aaaa").append(result);
});
});
$("#aaaa").on('click','li',function(){
alert($(this).html());
});
});
</script>
注意:li的父级目录aaaa不能改。