负载阿贾克斯

问题描述：

这是第一次，我使用Ajax和jQuery和我新的jQuery的我有一个结构负载阿贾克斯

$(document).ready(function(){ 
 
    data_url = $('.lazy_content').attr("data-url"); 
 
    data_id = $('.lazy_content').attr("data-target-id"); 
 

 
    $.ajax({ 
 
     url: data_url, 
 
     type: "POST", 
 
     beforeSend: function() { 
 
      $(".loaderDiv").show(); 
 
      $("#" + data_id).html(""); 
 
     }, 
 
     success: function(data) { 
 
      $(data).each(function(index, el) { 
 
       $(".loaderDiv").hide(); 
 
       $("#" + data_id).html(data); 
 
      }); 
 
     } 
 
    }); 
 
});

<div class="lazy_content" data-url="/ajax/yorumlar/@Model.OtelBilgileri.seflink" data-target-id="ajax-content-1"> 
 
    <h4 class="tur-main-baslik">COMMENTS</h4> 
 
    <div id="ajax-content-1"></div> 
 
</div> 
 

 
<div class="lazy_content" data-url="/ajax/trustyou/@Model.OtelBilgileri.seflink" data-target-id="ajax-content-2"> 
 
    <h4 class="tur-main-baslik section-head">POSTS</h4> 
 
    <div id="ajax-content-2"></div> 
 
</div>

，你看，我有data-url这个数据网址有我的ajax文件，我得到我的ajax文件，但页面加载后什么都不工作..我的代码有什么问题？

你有什么错误吗？ – Mazz

浏览器控制台中的任何错误？你在代码之前添加了jQuery库吗？ –

没有，但我想问题是我的事件 –

答

把你的代码中$(document).ready()

，我认为你需要改变你的代码，如：

$(document).ready(function() { 
    data_url = $('.lazy_content').attr("data-url"); 
    data_id = $('.lazy_content').attr("data-target-id"); 

    $.ajax({ 
     url: data_url, 
     type: "POST", 
     beforeSend: function() { 
      $(".loaderDiv").show(); 
      $("#" + data_id).html(""); 
     }, 
     success: function(data) { 
      $(data).each(function(index, el) { 
       $(".loaderDiv").hide(); 
       $("#" + data_id).html(data); 
      }); 
     } 
    }) 
})

或者每一类即迭代.lazy_content

$(document).ready(function() { 
    $('.lazy_content').each(function(){ 
     data_url = $(this).attr("data-url"); 
     data_id = $(this).attr("data-target-id"); 

     $.ajax({ 
      url: data_url, 
      type: "POST", 
      beforeSend: function() { 
       $(".loaderDiv").show(); 
       $("#" + data_id).html(""); 
      }, 
      success: function(data) { 
       $(data).each(function(index, el) { 
        $(".loaderDiv").hide(); 
        $("#" + data_id).html(data); 
       }); 
      } 
     }) 
    }) 
})

我有很多的div让我的AJAX文件，但这个代码只对一个DIV –

所有正确的工作一个新的！你能不能用jsfiddle展示更多的代码？ –

Ok.Updated我的代码和Ajax的工作原理只有第一个div我的AJAX文件加载的第一个div和另一个DIV不加载我想这是有关与'this'或类似的东西 –

答

根据其中的JavaScript在DOM可能不会在你运行该脚本点已加载的HTML。

封装的jQuery中你的JavaScript '上加载的DOM' 函数（$（文件）。就绪（函数（）{）将按如下解决这个问题，代码。

$(document).ready(function() { 
    $('.lazy_content').on("load", function() { 
    data_url = $(this).attr("data-url"); 
    data_id = $(this).attr("data-target-id"); 

    $.ajax({ 
     url: data_url, 
     type: "POST", 
     beforeSend: function() { 
     $(".loaderDiv").show(); 
     $("#" + data_id).html(""); 
     }, 
     success: function(data) { 
     $(data).each(function(index, el) { 
      $(".loaderDiv").hide(); 
      $("#" + data_id).html(data); 
     }); 
     } 
    }) 
    }); 
});

我使用的是已有的document.ready我猜问题是我的事件 –

答

Load evnet只能在window，img元素中使用。

如果您使用jQuery负载功能，您可以使用回调函数。

$("#target").load("append.html",function(){ 
    // callback 
});

另一种方法是，在目标html下追加脚本。

相关推荐