页面加载后加载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下面附加脚本。