Ajax 컨텐츠를로드 한 후 jQuery 사용

ajax 컨텐츠가 페이지에 추가 된 후로드되는 DOM 요소에 영향을 미치는 데 문제가 있습니다. 아래 코드에 표시된 항목 수를 출력하는 내 console.log는 0을 인쇄하지만 firebug에서 console.log($('.user-alert').length);을 실행하면 페이지에 2 개의 요소가 채워지므로 올바른 2를 인쇄합니다. 여기 Ajax 컨텐츠를로드 한 후 jQuery 사용

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

이것은 아약스 인이 코드는 기여 드루팔 모듈에서 염두에 두어야한다 수정할 수 없습니다 :

(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로 이미지를 추가하는 것에 대해 언급합니다. 이 코드를 게시 할 수 있습니까? –

물론, 아약스의 문제는 공헌 된 코드라고 불리지 만, 수정해서는 안됩니다. – Novazero

Drupal, 플러그인에 도움이되지 않습니다. http://drupal.stackexchange.com/questions/42148/drupals-attach-behaviours-react-on-all-newly-loaded-content의 의견을 읽고 싶을 수 있습니다. 아마 거기에 게시 할 수 있습니다 drupal 특정 stackexchange 사이트입니다 .. –

당신은 아약스 이미지 아칸소 후 InfiniteRotator.init();를 호출해야 e가 페이지에 추가되었습니다.

출처

2012-12-24 20:26:33

Ajax 컨텐츠를로드 한 후 jQuery 사용

답변

관련 문제