写代码遇到一个纠结的问题，就是使用Ajax技术的时候，服务器返回的HTML字符串中元素的Jquery控制或者说是事件绑定方法失效，但是CSS控制是正常的，而如果不采用Ajax技术，则不会产生这样的问题。后来终于发现，其实Jquery绑定事件的元素是当前页面的元素，而采用Ajax技术后，服务器返回的HTML代码中的元素隶属于另一个页面，此时其中的元素也当然不会被绑定事件。
我们来详细看一下。我们平常为元素绑定事件是这样做的，以我做的实验为例：
在主页面如main.php中加入
[javascript]
<script type="text/javascript" src="<?php echo base_url ( "items/js/index/base_all.js" )?>"></script> 然后这个文件中的元素及可以用JS文件中的方法来控制了。假如说我的main.php有这样一段代码：
[php]
<div class="product_photo"><a href=""><img src=<?php echo base_url ( $picture_path ); ?> alt="" class="product_focus"></img></a></div> 我想控制img这个元素。并在base_all.js写了这样一段代码：
[javascript]
$(function() { $(".product_focus").bind( 'mouseover', function() { $(this).parent().parent().parent().parent().parent().children( '.product_display').css( { top : $(this).position().top + "px", left : $(this).position().left - 15 + $(this).outerWidth(false) + "px" }); $(this).parent().parent().parent().parent().parent().children( '.product_display').show(); }); $(".product_focus").bind('mouseleave', function() { $(".product_display").hide(); }); }); 这样就可以产生相应的鼠标移入移除的效果。但是如果main.php中的这段代码是Ajax服务器返回的，Jquery特效就不会起一点作用。
如：