首页 / 操作系统 / Linux / Ajax 服务器返回html字符串中元素的事件绑定方法

写代码遇到一个纠结的问题，就是使用Ajax技术的时候，服务器返回的HTML字符串中元素的Jquery控制或者说是事件绑定方法失效，但是CSS控制是正常的，而如果不采用Ajax技术，则不会产生这样的问题。后来终于发现，其实Jquery绑定事件的元素是当前页面的元素，而采用Ajax技术后，服务器返回的HTML代码中的元素隶属于另一个页面，此时其中的元素也当然不会被绑定事件。 我们来详细看一下。我们平常为元素绑定事件是这样做的，以我做的实验为例：在主页面如main.php中加入[javascript]

1. <script type="text/javascript"  
2. src="<？php  
3. echo base_url （ "items/js/index/base_all.js" ）？>"></script>  

然后这个文件中的元素及可以用JS文件中的方法来控制了。假如说我的main.php有这样一段代码： [php]

1. <div class="product_photo"><a href=""><img  
2.     src=<？php  
3.         echo base_url （ $picture_path ）;  
4.         ？> alt=""  
5.     class="product_focus"></img></a></div>  

我想控制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字符串之后。为元素重新绑定事件就可以了。。