Unobtrusive javascript和動態html

我正在尋找一種方法在動態html場景中使不顯眼的javascript（通過data-*屬性）。讓我們假設我們有一個input元素代表了一個jQuery UI的日期選擇器：Unobtrusive javascript和動態html

<input type="date" data-min-date="today" />

並做了工作中的JS：

(function(){ 
    $(function() { 
     $("input[type=date]").each(function() { 
      var el = $(this); 
      el.datepicker(el.data()); 
     }); 
    }); 
})(jQuery);

現在我需要不顯眼的跨瀏覽器的方法來轉換裸體輸入成日期選擇器。輸入將被動態添加。一般來說，我無法控制添加日期選擇器的代碼。通常，代碼將通過jquery.ajax.unobtrusive或jquery-pjax（它們都使用jQuery.html（）方法）作爲服務器端預渲染的html注入。但是我需要更多的通用soution，它可以在所有支持jQuery的場景中使用。我看過mutation events但它們不支持在IE中。

完整的jsfiddle，例如http://jsfiddle.net/zv9Rt/1/

來源

2012-04-08 hazzik

這些輸入元素是如何添加的？通過jQuery，或通過DOM？ – 2012-04-08 15:08:05

@RobW，實際上它會是一個jQuery-pjax或jquery.ajax.unobtrusive。他們都使用jquery.html方法。但我想要更通用的解決方案。 – hazzik 2012-04-08 15:10:02

你可以使用setTimeout/setInterval來檢查新插入，或者封裝'.append'，'.html'等，並檢查是否存在新的'input [type = date]'元素。 – 2012-04-08 15:30:43

使用Livequery • Documentation。

$("input[type=date]").livequery(function() { 
    var el = $(this); 
    el.datepicker(el.data()); 
});

來源

2012-04-08 17:18:31

。它使用setInterval/setTimeout，因此我將爲突變事件添加supprot。 – hazzik 2012-04-08 17:20:42

@hazzik不，它不是。它包裝了'.append'，'.html'等方法，正如我在問題的評論中所描述的那樣。 'setTimeout'可能用於確保元素已被正確渲染。 – 2012-04-08 17:22:02

確定:)我的錯（（： – hazzik 2012-04-08 17:24:26

使用$.delegate：

(function(){ 
    $(function() { 
    $('body').delegate("input[type=date]", function() { 
     var $el = $(this); 
     $el.datepicker($el.data()); 
    }); 
    }); 
})(jQuery);

來源

2012-04-08 15:37:17

只是不工作 – hazzik 2012-04-08 16:08:37

對不起。我忘了包含父母選擇器。我修好了。 – 2012-04-08 16:19:05

只需使用.on()。

這裏有一個例子：http://jsfiddle.net/H7ZUa/1/

來源

2012-04-08 15:38:03

這是不適合的情況下，當我想用showOn和其他美麗的日期選擇器選項。無論如何，請參閱示例http://jsfiddle.net/zv9Rt/2/ – hazzik 2012-04-08 16:07:12

Unobtrusive javascript和動態html

回答

相關問題