jQuery的滑塊效果的div

我在我的頁面上的head標籤之間下面的腳本：jQuery的滑塊效果的div

$.ajax({ 
    type: "POST", 
    url: "my script that gets what I need", 
    context: document.body, 
    success: function(data){ 
    //data is now the value that PHP echoed 
     phpsaid = data.split('|'); 
     var size_ind = phpsaid.length/6; 
     var size_per = 6; 
     for (var i_one =0; i_one<size_ind; i_one++){ 
      for(var i_two =0; i_two<1; i_two++){ 
       if(i_one == 0){ 
        var i_get = 0 
       } 
       else{ 
        var i_get = i_one * 6; 
       } 
      $("#big_container").append("<div class ='neato'><div class ='c1'>"+phpsaid[i_get]+"</div><div class ='c2'>"+phpsaid[i_get+1]+"</div><div class ='c3'>"+phpsaid[i_get+2]+"</div><div class ='c4'>"+phpsaid[i_get+3]+"</div><div class ='c5'>"+phpsaid[i_get+4]+"</div></div>")   

      } 
     }  
    } 
});

然後在主體我：

<div id ="big_container"> 

</div>

了AJAX腳本以上正在生成div進入big_container。客戶已經指定嚴格按照這種方式來完成（這意味着動態地生成所有的div，所以不同的方式來解決它的概念性的論點不幸在這裏沒有多大幫助。

這裏是我的問題：

我也希望下面的插件適用於big_container的所有元素。當我將div元素硬編碼到頁面中時，這當然是完美的，但我無法使它在#big_container中的ajax生成的div上工作。

$(function(){ 
    $('#big_container').bxSlider({ 
    mode: 'vertical', 
    ticker: true, 
    tickerSpeed: 4500, 
    displaySlideQty: 5 
    }); 
});

如何讓插件函數適用於ajax生成的div，一旦它們實際上已經生成了？

來源

2012-02-20 absentx

插入您的初始化代碼後$("#big_container").append("...");

它看起來像

$("#big_container").append("<div class ='neato'>..and so on.."); 
      } 
    } // the end of the 'for' loops 
$("#big_container").bxSlider({ 
        mode: 'vertical', 
        ticker: true, 
        tickerSpeed: 4500, 
        displaySlideQty: 5 
        });

如果您在頁面上再次調用Ajax和新的內容添加到現有的一個那麼最好是寫的通話在bxSlider作爲

$("#big_container .neato:last").bxSlider({ 
        mode: 'vertical', 
        ticker: true, 
        tickerSpeed: 4500, 
        displaySlideQty: 5 
        });

的剛過.append部分

來源

2012-02-21 05:10:00 Cheery

他應該可以在''for''循環外面做。 – powerbuoy 2012-02-21 06:05:07

@powerbuoy可能是，我只是給他看了一個主意:)但是，謝謝.. – Cheery 2012-02-21 06:16:10

非常感謝你，非常有幫助。 – absentx 2012-02-21 20:09:43

這是人們面臨的一個常見問題，即由ajax生成的元素（動態插入到dom中）不會採取任何操作或由任何監聽器或任何內部準備好的插件通知，因爲它們未在ready事件中註冊。爲了解決這樣的問題我使用不同的方法，如以下

$(document).ready(function(){ 
    myReadyFunction(); 
}); 

function myReadyFunction() 
{ 
    $("#big_container .neato:last").bxSlider({...}); 
    // All other codes that normally reside inside ready event. 
}

每個Ajax調用完成後，當成功（如果需要），只需撥打myReadyFunction（）;在你的情況下，你可以把你的$（「＃big_container」）。bxSlider（{...}）放入myReadyFunction（）;並調用myReadyFunction（）;成功完成ajax調用後，最初調用myReadyFunction（）;內部準備好的事件。

來源

2012-02-21 06:49:35

非常有幫助，謝謝。 – absentx 2012-02-21 20:10:27

不客氣:-) – 2012-02-21 20:26:23

jQuery的滑塊效果的div

回答

相關問題