動態地添加多個jQuery UI的日期選擇器到頁面

Question

我有一個表單，最初加載jquery-UI中的一個日期選擇器。用戶然後可以點擊添加以添加更多日期。這些新的日期字段應附加到DOM，但顯然不。我知道我需要或應該使用.live（）或.bind（），但我在做最好的方法遇到了一些麻煩。以下是我的代碼。謝謝你的任何想法。

 // add a formfield 
    function addFormField() { 
     var id = document.getElementById("DateID").value;      

     // add date form to page 
     $("td#dateDiv").append("<p id='row" + id + "'> Calendar Dates " + id + " <br> <input type='text' size='20' class='hasDatepicker' name='inputDate[]' id='inputDate" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>"); 

     $('#row' + id).highlightFade({ 
      speed:1000 
     }); 

     id=(id-1) + 2; 
     document.getElementById("DateID").value = id; 
    } 

    function removeFormField(id) { 
     $(id).remove(); 
    }  

    $("#addDate").live("click", function(){ 
      addFormField(); 
    }); 

Answer 1

首先確保您的addFormField函數實際上是將新字段插入到窗體中。然後在任何新字段上撥打.datepicker();。

內addFormField：

$("td#dateDiv").append(... 

$("td#dateDiv").find(".hasDatepicker").datepicker();