document.on ("click", "# myId", function() {} не работает для обновления owl carousel

Question

Я пытаюсь использовать пример Carousel и переписать функцию для поддержки загрузки по клику следующим образом:

$(document).on("click","#myId",function(){ 
    $("#owl-demo").owlCarousel({ 
     autoPlay : 3000, //Set AutoPlay to 3 seconds 
     items : 2, 
     itemsDesktop : [1199,3], 
     itemsDesktopSmall : [979,3] 
    }); 
}); 

... так что я могу использовать его в моем вебе-странице для переключения DIV следующим образом:

<div class="tabs clearfix"> 
    <ul> 
    <li class="active"><a href="#01" id="myId" data-toggle="tab">2015</a></li> 
    <li><a href="#02" id="myId" data-toggle="tab">2014</a></li> 
    </ul> 
</div> 
<div class="tab-content"> 
    <div class="tab-pane active" id="01"> 
    <div id="owl-demo"> 
     <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div> 
     <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div> 
    </div> 
    </div> 
</div> 
<div class="tab-content"> 
    <div class="tab-pane active" id="02"> 
    <div id="owl-demo"> 
     <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div> 
     <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div> 
    </div> 
    </div> 
</div> 

Я пытаюсь добиться чего-то, как показано ниже, с различной каруселью изображений на праве окна щелкните по вкладке в левом окне

Любая помощь приветствуется. Спасибо!

Answer 1

Я думаю, что было бы проще настроить these tabs вместо того, чтобы пытаться что-то написать с нуля. Просто бросьте каждую карусель в соответствующий контейнер табуляции. Затем инициализируйте все карусели одновременно при загрузке страницы. Я не вижу необходимости повторно инициализировать весь плагин при каждом переключении на новую вкладку. Ваша разметка будет выглядеть примерно так:

<div id="tabs-container"> 
    <ul class="tabs-menu"> 
     <li class="current"><a href="#tab-1">Tab 1</a></li> 
     <li><a href="#tab-2">Tab 2</a></li> 
     <li><a href="#tab-3">Tab 3</a></li> 
     <li><a href="#tab-4">Tab 4</a></li> 
    </ul> 
    <div class="tab"> 
     <div id="tab-1" class="tab-content"> 
      <div id="owl-slider-1"> 
       <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div> 
       <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div> 
      </div> 
     </div> 
     <div id="tab-2" class="tab-content"> 
      <div id="owl-slider-2"> 
       <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div> 
       <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div> 
      </div> 
     </div> 
     <div id="tab-3" class="tab-content"> 
      <div id="owl-slider-3"> 
       <div class="item"><img src="img/sample_1.jpg" alt="The Last of us"></div> 
       <div class="item"><img src="img/sample_2.jpg" alt="GTA V"></div> 
      </div> 
     </div> 
    </div> 
</div> 

И ваш JS будет выглядеть примерно так:

(function() { 

    $("#owl-slider-1").owlCarousel({ 
     autoPlay : 3000, //Set AutoPlay to 3 seconds 
     items : 2, 
     itemsDesktop : [1199,3], 
     itemsDesktopSmall : [979,3] 
    }); 

    $("#owl-slider-2").owlCarousel({ 
     autoPlay : 3000, //Set AutoPlay to 3 seconds 
     items : 2, 
     itemsDesktop : [1199,3], 
     itemsDesktopSmall : [979,3] 
    }); 

    $("#owl-slider-3").owlCarousel({ 
     autoPlay : 3000, //Set AutoPlay to 3 seconds 
     items : 2, 
     itemsDesktop : [1199,3], 
     itemsDesktopSmall : [979,3] 
    }); 

    $(".tabs-menu a").click(function(event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
    }); 

})(); 

Очевидно, что этот код полностью не тестировался, но он должен направить вас в правильном направлении.