ajax加载页面后加载页面的javascript不能执行

 ajax加载页面后加载页面的javascript不能执行吧,有很多朋友都会碰到这种问题,下面我们来提供一些解决办法.

问题分析:

先是容器,一开始是隐藏的,代码如下:

 
  1. <SCRIPT>  
  2. $(document).ready(function() {  
  3. $('add_div').hide();  
  4. });  
  5. </SCRIPT>  
  6. <DIV class=add_div></DIV>  

这个div是空的,用于将$.load()的内容放入其中,当我们点击“查看”按钮后,执行如下js,代码如下:

 
  1. function edit(){  
  2.     $("#add_div").css("display","");  
  3.     //清空，并将数据放入  
  4.     $('#add_div').html('');  
  5.     $("#add_div").load('?',{  
  6.         act:"list"  
  7.     });  
  8. }  

返回的内容是如下代码:

 
  1. <DIV id=reply_list><DIV style="MARGIN: 2px; FLOAT: left; CURSOR: pointer" id=24 class=replyItem>记录（24）</DIV>  
  2. <A style="MARGIN: 2px; FONT-SIZE: 14px" id=24 class=deletereplyitem title=删除 href="javascript:void(0)" jQuery18306790571601728192="39">×</A>  
  3. <DIV style="CLEAR: both"></DIV>  
  4. </DIV>  

而我如下代码:

 
  1. $(document).ready(function() {  
  2.     // for delete  
  3.     $(".deletereplyitem").click(function(){  
  4.         alert('delete');  
  5.         $.ajax({  
  6.             type:"POST",  
  7.             data:"action=delete&destTable=replytable&masterId="+this.id+"&reviewId="+$("input[name=reviewId]").val(),  
  8.             url:"?",  
  9.             dataType:"json",  
  10.             success:function(data){  
  11.                 if(data.num>0){  
  12.                     alert(data.error);  
  13.                 }  
  14.                 if(data.num==0){  
  15.                     alert("操作成功");  
  16.                 }  
  17.             }  
  18.         })  
  19.     })  
  20.     //显示一条详细  
  21.     $(".replyItem").click(function(){  
  22.         alert('进来！！');  
  23.         $.ajax({  
  24.             type:"POST",  
  25.             data:"act=getOne&id="+this.id,  
  26.             url:"?",  
  27.             dataType:"json",  
  28.             success:function(data){  
  29.                 if(data.num>0){  
  30.                     alert(data.error);  
  31.                 }  
  32.                 if(data.num==0){  
  33.                     alert('雅蠛蝶!'+data);  
  34.                     //如果之前添加过内容，那么此刻打开编辑器还是存在上次编辑的东西， 所以要先清空编辑器  
  35.                     //KE.html('content',"");    //firefox存在兼容bug  
  36.                     KE.util.setFullHtml('replycontent', '');  
  37.                     //KE.html('content',data);  
  38.                     KE.util.setFullHtml('replycontent', data);  
  39.                 }  
  40.             }  
  41.         })  
  42.     })  
  43. })  

此时当我们点击 “X” 的时候是没有任何反应的…

也没有js错误…

-.-# 很是郁闷调了半天,都还是这样,怪了,于是找芳芳的麻烦~（我js不行~）,然后芳芳告诉我必须再“注册”一次这些方法,并演示了一下，心服口服……膜拜~女神~,于是我将方法封装了一下，形容了如下代码(重点是加了回调函数),代码如下:

 
  1. function edit(){  
  2.     $("#add_div").css("display","");  
  3.     //清空，并将数据放入  
  4.     $('#add_div').html('');  
  5.     $("#add_div").load('?',{  
  6.         act:"list"  
  7.     },function(){  
  8.         $(".deletereplyitem").click(delReplyOne);   //获取一条详细  
  9. $(".replyItem").click(delReplyOne);   //删除一条  
  10.     });  
  11. function getReplyDetail(){  
  12.     $.ajax({  
  13.         type:"POST",  
  14.         data:"act=getOne&id="+this.id,  
  15.         url:"?",  
  16.         dataType:"json",  
  17.         success:function(data){  
  18.             if(data.num>0){  
  19.                 alert(data.error);  
  20.             }  
  21.             if(data.num==0){  
  22.                 alert('雅蠛蝶!'+data);  
  23.                 //如果之前添加过内容，那么此刻打开编辑器还是存在上次编辑的东西， 所以要先清空编辑器  
  24.                 //KE.html('content',"");    //firefox存在兼容bug  
  25.                 KE.util.setFullHtml('replycontent', '');  
  26.                 //KE.html('content',data);  
  27.                 KE.util.setFullHtml('replycontent', data);  
  28.             }  
  29.         }  
  30.     })  
  31. }  
  32. function delReplyOne(){  
  33.     $.ajax({  
  34.         type:"POST",  
  35.         data:"action=delete&destTable=replytable&masterId="+this.id+"&reviewId="+$("input[name=reviewId]").val(),  
  36.         url:"?",  
  37.         dataType:"json",  
  38.         success:function(data){  
  39.             if(data.num>0){  
  40.                 alert(data.error);  
  41.             }  
  42.             if(data.num==0){  
  43.                 alert("操作成功");  
  44.             }  
  45.         }  
  46.     })  
  47. }  
  48. }  

这些都是比较细的东西,再看一个实例,代码如下:

 
  1. $(document).ready(function() {  
  2.     $('content_div').hide();  
  3.     $('#list_user').click(function(event){  
  4.         event.preventDefault();  
  5.         load_user();  
  6.     });  
  7. });  
  8. function load_user(){  
  9.     //load page  
  10.     $("#content_div").load('your page url',function(){  
  11.         //回调函数，在这里注册被加载页面需要的事件  
  12.         $(".deleteItem").click(delItem);  
  13.         $(".editItem").click(editItem);  
  14.     });  
  15.     function delItem(){  
  16.         $.ajax({  
  17.             type:"POST",  
  18.             url:"your url",  
  19.             dataType:"json",  
  20.             success:function(data){  
  21.             }  
  22.         });  
  23.     }  
  24.     function editItem(){  
  25.         $.ajax({  
  26.             type:"POST",  
  27.             url:"you url",  
  28.             dataType:"json",  
  29.             success:function(data){  
  30.             }  
  31.         });  
  32.     }  
  33. }  
  34.  
 

扫一扫手机访问