Question

我的这个功能在我的页面中运行良好。问题是它在Ajax加载的结果中不起作用。

HTML

  <ul id="container">

    <img src='icons/px.gif' data-src="images.png\" class='lazy-img' />
    <img src='icons/px.gif' data-src="images.png\" class='lazy-img' />
    <img src='icons/px.gif' data-src="images.png\" class='lazy-img' />
    <img src='icons/px.gif' data-src="images.png\" class='lazy-img' />
    <img src='icons/px.gif' data-src="images.png\" class='lazy-img' />
    <img src='icons/px.gif' data-src="images.png\" class='lazy-img' />


         </ul>

JQUERY

 setTimeout( function(){
     $('.lazy-img').each(function() {this.src = $(this).data('src'); 
          }).removeAttr('data-src');
                  }, 800);

我应该如何将此功能与容器绑定？

Answer 1

$(document).ready(function(){

$('ul#container').on('select',function(){
setTimeout( function(){
     $('ul#container .lazy-img').each(function() {
     this.src = $(this).data('src'); 
          }).removeAttr('data-src');
                  }, 800);
});
$('ul#container').trigger('select');

});

您可以做的是将事件与ul#container绑定，并在文档就绪时触发该事件。

在你的AJAX成功中再次触发该事件!!

$.ajax({
  . 
  .
  success: function(data){
   $('ul#container').trigger('select');
  },
});

还将此AJAX函数放入document.ready 您可以在需要调用该功能的任何地方触发此事件。

试试这个，希望它会有所帮助。

将函数绑定到ajax加载的数据on（）不工作的jquery

1 个答案: