使用jquery加载ajax内容

我需要加载一些外部html内容到一个容器，一切正常，当我点击触发按钮，它加载的内容，但问题出现的原因是外部内容有一个画廊，并且一个下拉菜单，当内容被加载时，CSS工作正常，但JavaScript根本不起作用。我需要知道如何使这项工作。使用jquery加载ajax内容

这是我代码的示例：（的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是无效的，或者是没有正确连接？ – 2015-02-11 23:13:14

@ShaunLoftin当我将外部HTML直接放入容器中作为一个单独的页面时，它完美地工作，但是当我将它放入一个外部HTML文件，然后使用AJAX load（）函数将其加载到该容器中时，javascript仅停止加工。 – 2015-02-11 23:16:32

你也许可以做一个代码的小提琴，看看它是否正确流动？ – 2015-02-11 23:20:14

您正试图添加使用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

使用jquery加载ajax内容

回答

相关问题