加载Ajax内容后使用jQuery

Question

I'm having trouble implementing an effect on DOM elements being loaded after ajax content has been added to a page. My console.log that prints out the number of items shown in the code below prints out 0, though when I run a console.log($('.user-alert').length); on firebug it prints out 2 which is correct since I have 2 elements being populated on the page.

Here is my code:

    ( function($) {

  Drupal.behaviors.alerts = { 
    attach: function (context) {

      var InfiniteRotator =
      {
          init: function()
          {
              //initial fade-in time (in milliseconds)
              var initialFadeIn = 1000;

              //interval between items (in milliseconds)
              var itemInterval = 5000;

              //cross-fade time (in milliseconds)
              var fadeTime = 2500;

              //count number of items
              var numberOfItems = $('.user-alert').length;
              console.log(numberOfItems);

              //set current item
              var currentItem = 0;

              //show first item
              $('.user-alert').eq(currentItem).fadeIn(initialFadeIn);

              //loop through the items
              var infiniteLoop = setInterval(function(){
                  $('.user-alert').eq(currentItem).fadeOut(fadeTime);
                  if(currentItem == numberOfItems -1){
                      currentItem = 0;
                  }else{
                      currentItem++;
                  }
                  $('.user-alert').eq(currentItem).fadeIn(fadeTime);

              }, itemInterval);
          }
      };
      InfiniteRotator.init();
    }
  };

}( jQuery ));

Here is the html Im trying to target:

<div class="block block-user-alert contextual-links-region block-user-alert block-user-alert-user-alert odd" id="block-user-alert-user-alert">
<div id="user-alert-45" class="user-alert">
   <div class="user-alert-close"><a href="javascript:;" rel="45">x</a></div>
   <div class="user-alert-message"><span class="user-label">User Alert:</span> Test Alert 2</div>
</div>

<div id="user-alert-43" class="user-alert" style="display: none;">
   <div class="user-alert-close"><a href="javascript:;" rel="43">x</a></div>
   <div class="user-alert-message"><span class="user-label">User Alert:</span> Test Alert 3</div>
</div>
</div>

This is the ajax, also keep in mind this code is from a contributed Drupal module which shouldn't be modified:

(function ($) {

  Drupal.behaviors.user_alert_get_message = {
    attach: function(context) {
      $.ajax({
        type: 'GET',
        url: Drupal.settings.basePath + Drupal.settings.user_alert.url_prefix + 'js/user-alert/get-message',
        success: function(response) {
          var id = $('.block-user-alert').attr('id');
          $('#' + id).html(response[1].data);
        }
      });

      $('body').delegate('div.user-alert-close a', 'click', function() {
        id = $(this).attr('rel');
        $.ajax({
          type: 'GET',
          data: 'message=' + id,
          url: Drupal.settings.basePath + Drupal.settings.user_alert.url_prefix + 'js/user-alert/close-message',
          success: function(response) {
            $('#user-alert-' + id).fadeOut('slow');
          }
        });
      });
    }
  };
}(jQuery));

Answer 1

You need to call InfiniteRotator.init(); after the ajax images are added to the page.