0

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.

Andrés Orozco
  • 2,490
  • 5
  • 32
  • 48
  • Is it that your JavaScript is invalid, or is that it is not linked correctly? – shaun Feb 11 '15 at 23:13
  • @ShaunLoftin When I put the external html directly into the container as one single page, it works perfectly, but when I put it into a external HTML file and then load it into that container using AJAX load() function, the javascript just stop working. – Andrés Orozco Feb 11 '15 at 23:16
  • Can you perhaps make a fiddle of the code to see if it flows correctly? – shaun Feb 11 '15 at 23:20
  • Possible duplicate of http://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file? – Alvaro Montoro Feb 11 '15 at 23:20

2 Answers2

0

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

e.g.

/**
 *  "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.

psiyumm
  • 6,437
  • 3
  • 29
  • 50
0

You need to use something like that

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

    });
Fatih Kahveci
  • 430
  • 4
  • 14