Question

我的页面上的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，我如何才能将插件函数应用于它？

Answer 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部分之后

Answer 2

这是人们面临的常见问题，即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（）;也准备好了。

jquery滑块效果对ajax生成的div

2 个答案: