Question

I am attempting to combine this article and this article where I have a date and time pickers in each row. I have this working for existing rows, but they don’t work on added rows.

I found the jQuery .live function which seems to be what I am looking for, but I am confused on how it works. Here is my working jQuery code:

$(".datepicker").datepicker({
    showAnim: '',
    dateFormat: 'm/d/yy',
    showOn: 'button',
    buttonImageOnly: true,
    buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
    buttonText: 'Select a date'
});
$(".timedropdown").timedropdown();

I have tried to change them to:

$(".datepicker").live("datepicker", function() {
    $(this).datepicker({
        showAnim: '',
        dateFormat: 'm/d/yy',
        showOn: 'button',
        buttonImageOnly: true,
        buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
        buttonText: 'Select a date'
    });
});
$(".timedropdown").live("timedropdown", function() {
    $(this).timedropdown();
});

But that not only doesn’t work, but it also removes them from the existing rows that previously worked.

What am I doing wrong?

Answer 1

I found this question that gave me the solution:

$(".datepicker").live("click", function() {
    $(this).datepicker({
        showAnim: '',
        dateFormat: 'm/d/yy',
        showOn: 'button',
        buttonImageOnly: true,
        buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
        buttonText: 'Select a date'
    });
});
$(".timedropdown").live("click", function() {
    $(this).timedropdown();
});