用ajax：隱藏DIV，replacewith，重新連接行爲則表明

UPDATE：這裏有一個的jsfiddle顯示問題用ajax：隱藏DIV，replacewith，重新連接行爲則表明

我試圖做類似GitHub的文件瀏覽器的東西。

（只需點擊一個文件夾來演示。唯一的區別就是我想要的是這部劇的權利「幻燈片」。）

我有一個AJAX調用，它返回一些JSON和用於替換一個div。我有大部分工作，但我無法弄清楚，jQuery的，我會用以下內容：

隱藏（）現有的div，我想用一個jQueryUI的「滑」的效果，以取代
更換使用replaceWith的內容（由於各種原因，我不能使用HTML（）它需要replaceWith（），但保持它隱藏
重新附加一些jQuery的行爲到新的內容（這段代碼是Drupal的具體，但它是一個班輪。它將其他jquery行爲重新附加到新內容中），並且內容仍然隱藏。
show（）具有jqueryUI'slide'效果的新div

我試過很多不同的東西。我知道Ajax是異步的，所以我需要在回調中運行或鏈接行爲。到目前爲止，我到這一點：

/* this snippet occurs in an $.ajax success: function, argumentWrapper is the div 
wrapper to replace, newContent is the new html that will be inserted */ 

argumentWrapper.hide({ 
    effect: 'slide', 
    direction: 'left', 
    complete: function() { 
     argumentWrapper.replaceWith(function() { 
       return $(newContent).hide({ 
        complete: function(){ 
         Drupal.attachBehaviors(newContent); 
        } 
       }).show({ 
        effect: 'slide', 
        direction: 'right' 
       }); 
     }); 
    } 
});

這幾乎工作，但它滑入我收到一條奇怪的「集束式」的效果了。就像在左邊一個非常div的停頓一樣。

UPDATE：這裏有一個的jsfiddle顯示問題

http://jsfiddle.net/JPqhz/1/

來源

2013-06-12 Joe

這裏是一個解決方案，如果您使用的容器來包裝內容。（感謝chinoto Freenode的#jquery）：

http://jsfiddle.net/JPqhz/7/

var 
    $container=$('#container') 
    ,wrapper = $("#wrapper") 
    ,newContent = '<div id="dynamic">This is new information<div class="clickme"></div></div>'; 


$container.on('click','.clickme',function(event) { 
    $container.hide({ 
     effect: 'slide', 
     direction: 'left', 
     complete: function() { 
      (function() { //put me in post function 
       wrapper.html(newContent); 
       //Drupal reattach behaviors goes here 
       $container.show({ 
        effect: 'slide', 
        direction: 'right' 
       }); 
      })() 
     } 
    }); 

});

來源

2013-06-12 17:53:15 Joe

用ajax：隱藏DIV，replacewith，重新連接行爲則表明

回答

相關問題