Load content with ajax using jquery

Question

I need to load some external html content into a container, everything works fine, when I click the trigger button, it load the content, but the problems comes because the external content has a gallery, and a dropdown menu, and when the content is loaded, the css works fine, but the javascript just doesn't work at all. I need to know how to make this work.

This is an example of my code:

Container (Index.php):

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

Content to load (to-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');
    });
});

The gallery doesn't work and not even the "window" that should be opened when ".load-trigger" is clicked.

Answer 1

You are trying to add event handlers using jQuery for dynamically added elements. Adding event handlers works in a different way for such DOM elements.

You need to use jQuery .on() .

eg

/**
 *  "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
});

Selectors can be used just as normally in jQuery .

Answer 2

You need to use something like that

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

    });