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類，它們來自於我修改過的元素上的原始元素，我只做了這個來證明你可以保留你的原始類可以區分元素（不同的樣式等），同時保持不顯眼。