Question

I’m finding a way to make unobtrusive javascript (via data-* attributes) in dynamic html scenarios. Let’s pretend that we have an input element which represents a jquery-ui datepicker:

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

And the js which does a work:

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

Now I need unobtrusive cross-browser way to convert naked inputs into a datepickers. The inputs will be added dynamically. In general I have no control on the code which adds the datepickers. In common the code will be injected as server-side prerendered html via jquery.ajax.unobtrusive or jquery-pjax (they both are using jQuery.html() method). But I need more generic soution which will work in all the jQuery-enabled scenarios.

I’ve looked at mutation events but they are not supported in the IE.

Complete jsfiddle-example http://jsfiddle.net/zv9Rt/1/

Answer 1

Use Livequery • Documentation.

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