Ajax和jQuery处理程序

Ajax and jQuery handlers

本文关键字：程序 处理 jQuery Ajax      更新时间：2023-09-26

我学习Ajax，我遇到了这个问题。

例如，我的标记是

<div id='ajax-container'>
  ..
  <div class='some-class-with-handler'>
    ..
  </div>
  ..
</div>

我有onClick-handler .some-class-with-handler-block

$(document).ready(function() { 
  ..
  $('.some-class-with-handler').click(function(){
    ..
  });
  ..
}
然后Ajax重载# Ajax -container-block中的所有内容，但是。some-class-with-handler-block仍然包含在#ajax-container-block的新内容中。同时，onClick处理程序没有绑定到新的.some-class-with-handler-块。如何重新构建此绑定?

两个选择:

  1. 使用jQuery.live: http://api.jquery.com/live/

    Update:根据文档，live从1.7开始已弃用。您可以使用上述文档中提到的语法:

    $( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

  2. AJAX后重新绑定click处理程序

    var someClassClickHandler = function(){
    ..
};
$('.some-class-with-handler').click(someClassClickHandler);
$.ajax({
    success: function () {
        $('.some-class-with-handler').click(someClassClickHandler);
    }
});

这是因为新的.some-class-with-handler是一个新元素，你不能这样绑定新元素。这样修改你的处理器-

$(document).ready(function() { 
  ..
  $(document).on('click','.some-class-with-handler', function(){
    ..
  });
  ..
}
相关文章：