Question

我需要将一些外部html内容加载到一个容器中，一切正常，当我点击触发按钮时，它会加载内容，但问题出现是因为外部内容有一个库，一个下拉菜单，以及何时内容加载，CSS工作正常，但javascript根本不起作用。我需要知道如何使这项工作。

这是我的代码示例：

容器（Index.php）：

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

要加载的内容（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');
    });
});

图库不起作用，甚至在点击“.load-trigger”时也不应打开“窗口”。

Answer 1

您正尝试使用jQuery为动态添加的元素添加事件处理程序。添加事件处理程序对这些DOM元素的工作方式不同。

您需要使用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
});

选择器可以在jQuery中正常使用。

Answer 2

你需要使用类似的东西

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

    });

使用jquery使用ajax加载内容

2 个答案: