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

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

Вот мой код:

(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 Im пытается предназначаться:

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

Это Аякса, также иметь в виду, что этот код из вклад модуля 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));

источник

2012-12-24 Novazero

Вы упомянули о добавлении изображений с помощью AJAX. Можете ли вы опубликовать код, который делает это? –

Несомненно, хотя проблема с ajax называется его кодом, поэтому я не должен его изменять. – Novazero

Не могу помочь с drupal, плагинами. Вы можете прочитать комментарии по адресу http://drupal.stackexchange.com/questions/42148/drupals-attach-behaviours-react-on-all-newly-loaded-content и, возможно, пост там, так как это отдельный сайт stackexchange для drupal. –

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

источник

2012-12-24 20:26:33

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

ответ

Смежные вопросы