Ajax 服务器返回html字符串中元素的事件绑定方法

写代码遇到一个纠结的问题，就是使用Ajax技术的时候，服务器返回的HTML字符串中元素的Jquery控制或者说是事件绑定方法失效，但是CSS控制是正常的，而如果不采用Ajax技术，则不会产生这样的问题。后来终于发现，其实Jquery绑定事件的元素是当前页面的元素，而采用Ajax技术后，服务器返回的HTML代码中的元素隶属于另一个页面，此时其中的元素也当然不会被绑定事件。

我们来详细看一下。我们平常为元素绑定事件是这样做的，以我做的实验为例：

在主页面如main.php中加入

我想控制img这个元素。并在base_all.js写了这样一段代码：

[javascript]

1. $(function() {  
2.     $(".product_focus").bind(  
3.             'mouseover',  
4.             function() {  
5.   
6.                 $(this).parent().parent().parent().parent().parent().children(  
7.                         '.product_display').css(  
8.                         {  
9.                             top : $(this).position().top + "px",  
10.                             left : $(this).position().left - 15  
11.                                     + $(this).outerWidth(false) + "px"  
12.                         });  
13.                 $(this).parent().parent().parent().parent().parent().children(  
14.                         '.product_display').show();  
15.             });  
16.     $(".product_focus").bind('mouseleave', function() {  
17.         $(".product_display").hide();  
18.     });  
19.   
20. });  

这样就可以产生相应的鼠标移入移除的效果。

但是如果main.php中的这段代码是Ajax服务器返回的，Jquery特效就不会起一点作用。

如：

[javascript]

1. $.ajax({  
2.         type:"POST",  
3.         url:"<?php echo site_url("ajax_part/getProductDetail");?>",  
4.         success:function(data)  
5.         {$(".just").empty();  

[javascript]

1.         $(".just").html(data);  
2.           
3.     }  
4.       
5. });  

其中data就是这段html代码，就会不起效果。这大概就是我当初遇到的问题，其实细细想想解决这个问题其实不难，既然Jquery只能给当前页面的元素绑定事件，那么我们就可以在Ajax返回的HTML字符串载入到当前页面后对其元素进行事件的重新绑定。方法就是这样：

不用包含base_all.js这个JS文件，而把其中的Jquery控制代码写入$.ajax中。如下：

[javascript]

1. $.ajax({  
2.         type:"POST",  
3.         url:"<?php echo site_url("ajax_part/getProductDetail");?>",  
4.         success:function(data)  
5.         {  
6.             $(".just").empty();  
7.             $(".just").html(data);  
8.             afterLoad();  
9.               
10.         }  
11.           
12.     });  

[javascript]

1. function afterLoad()  
2. {  
3.     $(function() {  
4.         $(".product_focus").bind(  
5.                 'mouseover',  
6.                 function() {  
7.   
8.                     $(this).parent().parent().parent().parent().parent().children(  
9.                             '.product_display').css(  
10.                             {  
11.                                 top : $(this).position().top + "px",  
12.                                 left : $(this).position().left - 15  
13.                                         + $(this).outerWidth(false) + "px"  
14.                             });  
15.                     $(this).parent().parent().parent().parent().parent().children(  
16.                             '.product_display').show();  
17.                 });  
18.         $(".product_focus").bind('mouseleave', function() {  
19.             $(".product_display").hide();  
20.         });  
21. }  

将Jquery放在页面载入Html字符串之后。为元素重新绑定事件就可以了。。