当前位置:asp编程网>技术教程>Javascript教程>  正文

jquery ajax获取内容新增到页面上onclick无效

2017-11-24 11:09:51   来源:www.aspbc.com   作者:wangsdong   浏览量:830   收藏

页面如下,且每次点击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不能改。





关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网