JQuery: I cannot use function on dynamically loaded content from AJAX

Question

I am having trouble with this code. I am trying to get dynamically some data and displayed. I use firebug to see if the request is success or not and indeed it is fine, but the problem is when I am trying to apply the activeImage() function. The images just don't want to show up. I think the problem is with using $(".stream .image").each(function() . Someone any ideas how to fix the issue:

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;    
  });
});

This function is trying to display the images.

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>");
        }

  });
}

Here is the HTML structure:

<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

The problem is the selector here:

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

This is looking for an element with a class columns that's an ancestor of an element with a class stream . In your HTML, you have this:

<div class="stream columns">

Which doesn't match the selector - you're trying to append HTML to a non-existent element.

So your JS probably wants to have this instead:

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

This selects an element that has both the class steam and the class columns . Notice there is no whitespace between them.