Datepicker after removing and re-adding an element

Datepicker after removing and re-adding an element

Hi,

I'm trying to use a datepicker on a element that I'm removing and adding (depending on values in a form). The problem is that, when the initial elements are re-added (via append) to the document, the datepicker no longer works, even if I put the datepicker again after re-inserting the element.

Does anyone know how to make the datepicker on a re-inserted element work again?

(I'm trying to avoid show/hide, because I'd rather not have the field submitted as part of the form when it's hidden.)

Best wishes,

Bruno.

Here is an short example:

  1. <html>
    <head>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript">
        var visible = true;
        $(document).ready(function() {
            $.datepicker.setDefaults({ dateFormat: $.datepicker.RFC_822 });
            $("#date1").datepicker();
            var table1 = $("#table1");
            $("#button1").click(function() {
                if (visible) {
                    table1.remove();
                    visible = false;
                } else {
                    $("#form1").append(table1);
                    visible = true;
                }
            });
        });
    </script>
    </head>
    <body>
    <h1>Hello World</h1>
    <form id="form1"><input type="button" id="button1"
        value="Show/Hide" />
    <table id="table1">
        <tr>
            <th>Date:</th>
            <td><input id="date1" type="text" /></td>
        </tr>
    </table>
    </form>
    </body>
    </html>