Question

我遇到了这段代码的问题。我试图动态获取一些数据并显示。我使用firebug来查看请求是否成功，确实没问题，但问题是当我尝试应用 activeImage（）函数时。这些图片并不想显示出来。我认为问题在于使用 $（＆＃34; .stream .image＆＃34;）。每个（function（）。有人想办法解决这个问题：

AJAX CALL

$(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的元素。请注意，它们之间没有空格。

JQuery：我不能使用来自AJAX的动态加载内容的函数

1 个答案: