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

时间:2013-02-07 21:19:46

标签: javascript jquery

这是我目前的代码:

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>

1 个答案:

答案 0 :(得分:2)

我认为你不应该以这种方式使用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。