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

[javascript]

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

[javascript]

        $(".just").html(data);                  }          });  

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

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

[javascript]

$.ajax({           type:"POST",           url:"<?php echo site_url("ajax_part/getProductDetail");?>",           success:function(data)           {               $(".just").empty();               $(".just").html(data);               afterLoad();                          }                  });  

[javascript]

function afterLoad()   {       $(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();           });   }  

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywpzs.html