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

回答

相关问题