使用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內容

回答

相關問題