Использование jQuery после загрузки содержимого Ajax

У меня проблемы с реализацией эффекта загрузки элементов DOM после добавления содержимого ajax на страницу. Мой console.log, который печатает количество элементов, показанных в приведенном ниже коде, выводит 0, хотя, когда я запускаю console.log($('.user-alert').length); на firebug он выводит 2, что правильно, так как у меня есть 2 элемента на странице.

Вот мой код:

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

Вот HTML, который я пытаюсь нацелиться:

<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>

Это ajax, также имейте в виду, что этот код взят из предоставленного модуля Drupal, который не должен изменяться:

(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));
Источник

1 ответ

Вам нужно позвонить InfiniteRotator.init(); после добавления изображений AJAX на страницу.

Источник
Другие вопросы по тегам