javascript - 如何在单击时使用 ajax 在动态创建的 div 中加载内容

Question

这是我当前的代码：

var container, url;

$(".nav-list li a").on("click", function(e) {

   e.preventDefault();

   var $url = this.href + " #content";
   var container = $("#content");

   $(".nav li").removeClass("active");
   $(this).parent().addClass("active");

   $(this).addClass("clicked");

   var $row = $(".span10");
   var $rowNew = $('.new');

   if ($rowNew.children().length > 1) {
        $(".span10 div").removeClass("new");
        $('<div class="row-fluid new"></div>').prependTo($row);
   }

   if ($(".new").length == 0) {
        $('<div class="row-fluid new"></div>').prependTo($row);
        $('<div class="span6">' + container.load(url) + '</div>').appendTo('.new');
   } else {
        $('<div class="span6">' + container.load(url) + '</div>').appendTo('.new');
   }

});

我正在尝试在<div class="span6">HERE中加载内容，</div>但我对如何设置 .load 并在其中加载内容感到困惑。

当前的html输出：

<div class="row-fluid new">
   <div class="span6">
       container.load(url)
   </div>
</div>

Answer 1

我认为您不应该使用load这种方式；它只是将结果放入您事先知道的现有元素中。更好地使用get成功回调：

    e.preventDefault();

    var url = $(this).attr('href') + ".content";

    [...]

    $.get(url, '', function(result) {
      if ($(".new").length == 0) {
        $('<div class="row-fluid new"></div>').prependTo($row);
        $('<div class="span6">' + result+ '</div>').appendTo('.new');
      } else {
        $('<div class="span6">' + result + '</div>').appendTo('.new');
      }
    });

在此过程中无需使用 var container = $("#content");并删除其 id。