JS代码不工作的AJAX加载意见

Question

我已经JavaScript代码（这不是我的）以下：

(function ($) { 
    // Code goes here 
    $.fn.switcher = function (opts) { 
     var defaults = { 
      btn: '.info_btn', // button class 
      block: '.details_info', //block for hide 
      hideifout: false, 
      classActive: 'open' 
      //classNotActive:'close' 
     }; 
     var options = $.extend(defaults, opts); 
     this.each(
      function() { 
       var $this = $(this); 
       var btn = $this.find(options.btn); 
       var block = $this.find(options.block); 
       var plaing = false; 
       var click = function (e) { 
        if (e.type == 'mouseleave') { 
         e.stopPropagation(); 
        } 
        if (plaing) return; 
        plaing = true; 
        if (block.is(':visible')) { 
         block.hide('blind', function() { 
          btn.removeClass(options.classActive); 
          btn.css('z-index', 0); 
          plaing = false; 
         }); 
        } else { 
         btn.addClass(options.classActive); 
         btn.css('z-index', 2); 
         block.show('blind', function() { 

          plaing = false; 
         }); 
        } 
       } 

       btn.click(click); 
       if (options.hideifout) { 
        block.mouseleave(click); 
       } 

      } 
     ); 
    } 
})(jQuery); 

此代码扩大/缩小div块。此代码位于main.js文件中。母版页中包含main.js。它适用于非Ajax请求。对于ajax加载的局部视图它不起作用。我的解决方案是：

$('#somediv').load('some action', function() { 

      $('.infoBlock').switcher(); 

      $('div.widgets').switcher(
        { 
         btn: '.expand', 
         block: '.voice_block', 
         hideifout: true       
        });    
     }); 

我必须把这块代码anywere。
可能有，最好的解决方案？

Answer 1

您不得不这样做的原因是因为您的原始代码在文档加载时绑定了事件。因此，您必须在Ajax请求完成加载并将新元素添加到DOM后进行相同的调用。

我可以看到的最简单的方法将阻止您必须执行您目前正在执行的操作，这取决于您可以使用的一组标准Css类名称（在中定义的默认类名称你的代码将工作），并定义一个通用的回调方法。

我没有HTML在这里，所以我盲注。但在要素：

<div class="expand">...</div> 
<div class="voice_block"> ... </div> 

你必须：

<div class="expand info_btn">...</div> 
<div class="voice_block details_info"> ... </div> 

，然后你可以有一个功能

function genericCallback(){ 
$('body').switcher(); 
} 

哪位能在每次请求

$('#somediv').load('some action', genericCallback); 

被称为

显然这可以b因为这只是一个概念证明，所以对性能提升做了调整。例如，根据DOM的大小，在switcher()调用期间执行所有元素的枚举可能不是明智的。另外，在这个例子中，我保留了你的expand和voice_block类，它们来自于我修改过的元素上的原始元素，我只做了这个来证明你可以保留你的原始类可以区分元素（不同的样式等），同时保持不显眼。