緩存DOM並綁定尚未呈現的元素上的點擊事件

「穩定的應用程序開發需要將代碼嚴格組織爲明確的」塊「。緩存DOM並綁定尚未呈現的元素上的點擊事件

爲此，我使用Mustache將腳本中的數據呈現到HTML中。

我存儲我的鬍子模板特殊的腳本標籤：

<script id="template" type="text/template"> 
    Mustache template goes here and is invisible 
</script>

要呈現在div模板我只需調用鬍子渲染功能

var template = $('#template').html(); 
$('#someDiv').html(Mustache.render(template));

現在想象一下，我想綁定單擊事件到Mustache模板中的元素或緩存稍後將使用的元素......我顯然無法在頁面加載時執行此操作，因爲模板尚未呈現。

爲了讓事件正常工作，我必須在之後聲明一個事件我已經呈現了HTML。要使用元素，我必須在需要時手動選擇它，例如$('.foo')而不是緩存this.foo

其結果是，現在我有（'點擊）事件和jQuery選擇遍佈我的對象，而不是bindEvents和cacheDOM函數。

這裏是問題的一個簡化的例子小提琴：https://jsfiddle.net/6L2ry6hr/

在上面的例子是不壞......但我的應用程序變得更加複雜它正在成爲一個有點麻煩。

來源

2017-03-13 Jethro Hazelhurst

鏈接不完整 –

您可以在問題中包含'html'，'javascript'嗎？你想達到什麼目的？ IIFE和'foo'對象的目的是什麼？ – guest271314

[jquery事件不會在ajax調用後觸發]的可能重複（http://stackoverflow.com/questions/13767919/jquery-event-wont-fire-after-ajax-call） – Tibblez

現在想象一下，我想在一個髭模板

我一個click事件的元素綁定顯然不能做到這一點在頁面加載，因爲模板尚未呈現。

該要求是可能的使用jQuery。可以將<script>元素的.innerHTML傳遞給jQuery()並附加事件和事件處理程序。

jQuery.holdReady(true); 
var template = jQuery($("#template").html()); 
// template.filter("element").on("event", function() {// do stuff}) 
jQuery("body").append(template); 
jQuery.holdReady(false); 
jQuery(function() { 
    // do stuff 
})

來源

2017-03-13 21:14:55 guest271314

緩存DOM並綁定尚未呈現的元素上的點擊事件

回答

相關問題