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"> 中的内容这里 </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。