jquery滑块对ajax生成的div的影响答案

【问题标题】：jquery slider effect on ajax generated divsjquery滑块对ajax生成的div的影响
【发布时间】：2012-02-20 22:06:02
【问题描述】：

我的页面上的 head 标签之间有以下脚本：

$.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 脚本正在生成要进入 big_container 的 div。客户已指定严格以这种方式完成（意味着使用 ajax 动态生成所有 div），因此不幸的是，不同方法的概念性参数在这里没有多大帮助。

这是我的问题：

我还想将以下插件应用于 big_container 的所有元素。当我将 div 元素硬编码到页面中时，这当然可以完美地工作，但我无法让它在#big_container 中的 ajax 生成的 div 上工作。

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

一旦实际生成了 ajax 生成的 div，如何让插件函数应用到它们？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

在$("#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 部分之后

【讨论】：

他应该在在for-loops之外进行。
非常感谢，非常有帮助。
@absentx 最后一个带有#big_container .neato:last 的例子应该放在循环中，在.append之后

【解决方案2】：

这是人们面临的一个常见问题，即由 ajax 生成的元素（动态插入到 dom 中）不采取行动或由任何侦听器或任何内部插件通知 ready，因为它们未在 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();在 ready 事件中也是如此。

【讨论】：