頁面加載后加載ajax

Question

這是我第一次將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這個數據URL有我的ajax文件，我正在獲取我的ajax文件，但是在頁面加載后沒有任何作用..我的代碼有什么問題？

Answer 1

根據JavaScript在HTML中的位置，在運行腳本時可能未加載DOM。

將您的JavaScript封裝在“加載DOM上” jQuery的jQuery中（$（document）.ready（function（）{）將解決此問題，代碼如下）。

$(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);
        });
      }
    })
  });
});

Answer 2

將您的代碼放入$（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);
                });
            }
        })
    })
})

Answer 3

加載evnet僅在window，img元素中可用。

如果使用Jquery加載函數，則可以使用回調函數。

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

另一種方法是，在目標html下面附加腳本。