Question

这是我第一次在jquery上使用ajax，而且我在jquery上使用了新的结构

＆＃13;

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

＆＃13;

<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>

＆＃13;

正如你所看到的那样data-url这个数据网址有我的ajax文件而且我得到了我的ajax文件，但是在页面加载之后没有任何工作......我的代码出了什么问题？

Answer 1

根据javascript在HTML中的位置，DOM可能在您运行脚本时没有加载。

将javascript封装在jquery'on DOM loaded'函数（$（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下面。

页面加载后加载ajax

3 个答案: