如何觸發不顯眼的JavaScript的內容是動態與阿賈克斯（燈箱）

Question

我有一些鏈接從阿賈克斯進來需要收藏夾功能：在頁面加載

<a href="..." class="lightbox"><img src='...'></a> 

通常這是給定的行爲通過處理程序，但由於內容來自ajax，UJS沒有被觸發。

任何方式來做到這一點？

Answer 1

如果內容來自AJAX，那麼在頁面加載期間不要設置事件處理。相反，讓事件冒泡到沒有被更改或由AJAX取代的最頂層容器。最壞的情況下，使用document作爲最高節點。

$('<root element selector>').on('click', 'a.lightbox', function() { 
    // activate lightbox on the clicked element. 
}); 

Answer 2

我不知道你是如何觸發的Ajax請求，但如果是與jQuery這似乎很可能，你可以綁定在成功回調燈箱：

$.ajax({ 
    url: '/route', 
    success: function (response, status) { 
     $('.lightbox').lightbox(); 
    } 
}); 

可以傳遞在jQuery選擇器的上下文中，因此您不會將lightbox重新附加到頁面中已有的鏈接，例如，如果您的ajax調用將鏈接添加到ID爲「lightbox_links」的div，請改用此選擇器：

$('.lightbox', '#lightbox_links').lightbox();