Загрузить содержимое с помощью ajax с помощью jquery

Мне нужно загрузить в контейнер содержимое внешнего html-содержимого, все работает нормально, когда я нажимаю кнопку запуска, загружает контент, но проблемы возникают из-за того, что на внешнем контенте есть галерея, и выпадающее меню, и когда содержимое загружено, css отлично работает, но javascript просто не работает. Мне нужно знать, как это сделать.Загрузить содержимое с помощью ajax с помощью jquery

Это пример моего кода:

Контейнер (index.php):

<button class="button" id="load">LOAD</button> 
<div id="loaded-content"> 
    <!-- Loaded content goes here --> 
</div>

Содержимое для загрузки (к load.html)

<div class="column large-12"> 
    <img src="img/some_image.jpg" alt="Hikari"> 
</div> 
<div class="column large-12"> 
    <button class="button small expand load-trigger alert">Ver más</button> 
</div> 
<div class="column large-12"> 
    <div class="column large-12 load-collapsable"> 
     <div class="column large-12"> 
      <h1 class="load-collapsable-title">Café</h1> 
     </div> 
     <div class="column large-12 load-collapsable-gallery"> 
      <ul> 
       <li> 
        <img src="img/main-slide/img_1.jpg" alt=""> 
       </li> 
       <li> 
        <img src="img/main-slide/img_2.jpg" alt=""> 
       </li> 
       <li> 
        <img src="img/main-slide/img_3.jpg" alt=""> 
       </li> 
       <li> 
        <img src="img/main-slide/img_4.jpg" alt=""> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

Javascript (main.js)

$(document).on('ready', function(){ 
    collapsable_gallery.owlCarousel({ 
     autoPlay: true, 
     slideSpeed: 200, 
     paginationSpeed: 1000, 
     singleItem: true, 
     theme: 'owl-theme', 
    }) 

    $('.load-trigger').on('click', function(event){ 
     event.preventDefault(); 
     $('.load-collapsable').toggle(); 
    }); 

    $('#load').on('click', function(event){ 
     event.preventDefault(); 
     $('#loaded-content').load('some/directory/to-load.html'); 
    }); 
});

Галерея не работает и даже «окно», которое должно быть открыто при нажатии «.load-trigger».

источник

2015-02-11 Andres Orozco

Является ли это, что ваш JavaScript является недействительным, или в том, что он не связан правильно? –

@ShaunLoftin Когда я помещаю внешний html непосредственно в контейнер как одну страницу, он отлично работает, но когда я помещаю его во внешний HTML-файл и затем загружаю его в этот контейнер с помощью функции AJAX load(), javascript просто останавливается за работой. –

Можете ли вы сделать скрипку кода, чтобы увидеть, правильно ли она протекает? –

Вы пытаетесь добавить обработчики событий, используя jQuery для динамически добавленных элементов. Добавление обработчиков событий работает по-разному для таких элементов DOM.

Вам необходимо использовать jQuery .on().

например.

/** 
* "selector" is DOM object available before this 
* event handler was executed 
* 
* "dynamic_selector" is the DOM object which will 
* be dynamically added as a child of "selector" 
* 
* "event" can be replaced by values like "click" etc. 
*/ 
$('#selector').on("event", "#dynamic_selector", function(){ 
    //Attach your handler here 
});

Селекторы могут использоваться как обычно в jQuery.

источник

2015-02-11 23:30:55 activatedgeek

Вы должны использовать что-то вроде этого

jQuery('body').on('click','.element',function(){ 
     //do some stuff 

    });

источник

2015-02-12 07:41:40

Загрузить содержимое с помощью ajax с помощью jquery

ответ

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