Создание живого сборщика дат - JQuery

Question

Я знаю, что когда вы создаете элемент динамически, вы должны использовать что-то вроде:

$("#id").live("click", function() {
    //something
});

Прямо сейчас у меня есть это:

$('#tdInput1').datepicker({
    inline: true
});

Мой вопрос: как мне сделать это live , чтобы оно могло взаимодействовать с динамически созданными элементами.

Answer 1

Принятое решение не будет работать с событиями фокуса клавиатуры ... поэтому мне пришлось перейти на это:

$('.parent').on('focusin', '.datepicker', function(e) {
    $(this).datepicker(options);
});

Пришлось изменить .live на .on, так как jquery 1.9.1 не 't включает метод .live.Вышеприведенное работает как для событий мыши, так и для событий фокусировки клавиатуры.

Answer 2

Согласно: Jquery .live работает, но не с .datepicker

Это должно работать:

$("#tdInput1").live("click", function(){
    $(this).datepicker({ 
        inline: true 
    });
});

edit: Этот ответ для старых версий jQuery,Для jQuery 1.9+, пожалуйста, попробуйте ответ Вишала.

Answer 3

Вы имеете дело с двумя разными вещами. live в jQuery предназначен для привязки к событию, а datepicker специально не привязан к событию, а просто добавляет функциональность к элементу в определенный момент времени.

Единственная причина, по которой live работает с событиями, заключается в том, что jQuery фактически присоединяет обработчик событий к элементу-предку, и (благодаря тому, как события всплывают в javascript), предок фактически получает событие и делегирует его, как если бы он пришел от элемента. Принцип довольно сложный, но длинный и короткий, он может работать только с событиями.

Если вы хотите добавить функцию выбора даты, просто вызовите функцию datepicker для нового элемента после его создания.

Answer 4

Я думаю, что более правильное решение:

$('input.datepickerClass').live('focus', function(){
    if (false == $(this).hasClass('hasDatepicker')) {
        $(this).datepicker({ options });
    }
});