javascript - JQuery:我无法对从 AJAX 动态加载的内容使用函数

Question

我在使用这段代码时遇到了问题。我正在尝试动态获取一些数据并显示。我使用 firebug 查看请求是否成功，确实没问题，但问题是当我尝试应用 activeImage() 函数时。这些图像只是不想显示出来。我认为问题在于使用 $(".stream .image").each(function() 。有人有任何想法如何解决这个问题:

AJAX 调用

$(function(){
    $('.work .navigate li').on('click' , function() {
    var album = $(this).attr("data-search");
    $(".work .navigate li").removeClass("active");
    $(this).addClass("active");
    $('.stream .columns').empty();
    $.ajax({
      type: "POST",
      url: "<?php echo site_url('work/imageLoader');?>",
      data: "requestCategory=" + album,
      cache: false,
      success: function(html){
        $('.stream .columns').append(html);
        activeImage();
      },
      error:function(exception){alert('Exeption:'+exception);}
    });
    return false;    
  });
});

此函数正在尝试显示图像。

function activeImage()  {
  var s = $(".stream").width();
  $(".stream").attr("data-width", s);
  var z = 0;

  $(".stream").append("<div class='row'></div>");
  $(".stream .image").each(function() {

        var image = $(this);
        var link = $(this).attr("data-url");
        var w = $(this).attr("data-width");
        var h = $(this).attr("data-height");
        var l = 300 * (w / h);
        $(this).css("background-image", "url("+link+")");
        $(this).css("width", l);
        var t = s/z;
        if (t > 1.5 && s > 767) {
          z += l;
          $(".stream .row").last().append($(this));
        } else {
          z = l;
          $(".stream .row").last().append($(this));
          var m = 25;
        var j = 0;
        $(".stream .row").last().find("div.image").each(function() {
            j += $(this).width();
        });
        var p = j - s;
        if(j < s) p = s - j;
        $(".stream .row").last().find("div.image").each(function() {
          var i = $(this).width();
          var f = p * (i / j);
          var r = i - f;
          if(j < s) r = i + f;
          $(this).css('width', r - m);
          $(this).attr("z-width", r - m);
          $(this).attr("z-height", 300);
          if(!$(this).is(":last-child")) {
            $(this).css('margin-right', m);
          }
        });

          $(".stream").append("<div class='row'></div>");
        }

  });
}

这是 HTML 结构:

<section class="work" id="work">
  <div class="offset">
    <div class="navigate columns">
      <ul>
        <li data-search="all"><?php echo lang('work_all');?></li>
        {categories}
          <li data-search="{search}">{name}</li>
        {/categories}
        <li data-search="private"><?php echo lang('work_private');?></li>
      </ul>
    </div>

    <div class="stream columns">
    </div>

  </div>

</section>

Answer 1

问题在于这里的选择器:

$('.stream .columns').append(html);

它正在查找具有类 columns 的元素，该元素是具有类 stream 的元素的祖先。在您的 HTML 中，您有这样的内容:

<div class="stream columns">

这与选择器不匹配 - 您正在尝试将 HTML 附加到不存在的元素。

所以你的 JS 可能想要这个:

$('.stream.columns').append(html);

这将选择一个同时具有 steam 类和columns 类的元素。请注意，它们之间没有空格。