동적으로 생성 된 div 요소에서 jCarousel next/prev 버튼이 작동하지 않습니까?

Question

jCarousel에서 ajax 호출 후로드 된 데이터로 작업하고 있습니다. 로드는 괜찮지 만 다음/이전 버튼 클릭으로 미끄러지지 않습니다.

내 JS 파일 : 나는 정보 다음 의지를 가지고 위의 코드를 통해 사업부를 밀어하려고

(function($) { 
$(function() { 
    var itemDiv = $('#items'); 


$('.jcarousel-control-prev') 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '-=1' 
     }); 

    $('.jcarousel-control-next') 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '+=1' 
     }); 

    var setup = function(data, element) { 

     var html = '<div class="jcarousel-wrapper">'+'<div class="jcarousel" data-jcarousel="true">'+'<ul>'; 
     //var html = '<ul>'; 
     var mrpDiv; 

     $.each(data, function() { 
      mrpDiv = '<div class="mrp-div" style="text-align:center"><span>' + this.itemMRP + '</span></div>'; 

      html += '<li class="img-box"><a class="img-box" href="' + this.itemURL + '"><img src="' + this.itemImage + '" alt="' + this.itemTitle + '" style="width=100%"></a><div class="variant-div"><a href="' + this.itemURL + '" title="' + this.itemTitle + '"><div class="varnt-title" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap">' + this.itemTitle + '</div></a></div>'+mrpDiv; 
     }); 
     html += '</ul>'+'</div><a href="#" class="jcarousel-control-prev inactive" data-jcarouselcontrol="true">‹</a><a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">›</a></div>'; 
     // Append items 
     element.html(html); 
     // Reload carousel 
     element.find('.jcarousel').jcarousel(); 
    }; 

    $.ajax({ 
     type: 'GET', 
     dataType: "jsonp", 
     crossDomain: true, 
     url: "apiLink", 
     success: function (responseData) { 
      if(responseData && responseData.similarItems.length > 0){ 
       setup(responseData.similarItems, itemDiv); 
      } 

     }, 
     error: function (responseData) { 

     } 
    }); 

}); 
})(jQuery); 

은 회전 목마에서 보여합니다.

<div id="items"></div> 

모든 것이 정상적으로 작동하고 있습니다. 회전 장치가 제대로 작동하지 않습니다. 동적으로 추가하지 않으면 정상적으로 작동합니다.

<div class="jcarousel-wrapper"> 
      <div class="jcarousel" id="items" data-jcarousel="true"><ul> 
      </div> 
      <a href="#" class="jcarousel-control-prev inactive" data-jcarouselcontrol="true">‹</a> 
      <a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true">›</a> 
     </div> 

Answer 1

나는 잠재적으로 문제가되는 코드가 .on() 메서드를 사용하는 것으로 믿습니다. 메소드가 청취해야하는 이벤트를 지정하지 않았습니다. 난 당신이 클릭 이벤트를 수신한다고 가정 -이 작업을 수행해야합니다

.on('click', 'jcarouselcontrol:active', function() {

대신 : .on('jcarouselcontrol:active', function() {

... jQuery를 어떤 이벤트에서 발생하는 아무 생각 때문에 듣고 있어야하는 선택된 요소.

또한 jcarouselcontrol은 유효한 선택자가 아닙니다. .jcarouselcontorl을 의미합니까?

Answer 2

첫 번째 의견에서 지적한 문제를 제외한 모든 항목이 훌륭했습니다. 요소가로드 된 후 var setup = function(data, element) {의 메서드를 이동하면 모든 메서드가 제대로 작동하므로 메서드를 호출해야했습니다.