jquery ui datepicker不能添加新的輸入字段

Question

我是jQuery的新手，並且在這個問題上停留了很長一段時間。

我在輸入字段中使用jQuery ui datepicker，它是在單擊按鈕時動態添加的。日期選取器僅適用於輸入框的第一個實例。已嘗試尋找解決方案，但沒有運氣。任何幫助將不勝感激。由於

jQuery代碼

$(".datepicker").datepicker({ 
     inline: true, 
     dateFormat: "yy-mm-dd" 
    }); 

HTML代碼

<div id="newlink"> 
    <div> 
     <table style="border: 1px solid black;"> 
      <tr> 
       <th>Date:</td> 
        <td> 
         <input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width: 147px; height: 23px; z-index: 2; color: black" autocomplete="off"> 
        </td> 
      </tr> 
      <tr> 
       <th>Remark:</td> 
      </tr> 
      <tr> 
       <td> 
        <textarea name="linkdesc[]" size="1" id="Editbox19" style="width: 550px; height: 45px; z-index: 2; color: black" autocomplete="off"></textarea> 
       </td> 
      </tr> 
     </table> 
     <br> 
    </div> 
</div> 
<br> 
<p id="addnew"> 
    <input onclick="new_link()" type="button" name="linkdesc[]" value="Add More" style="width: 80px; height: 24px; z-index: 136; color: black;"> 
</p> 
<!-- Template --> 
<div id="newlinktpl" style="display: none"> <font size="1.5"> 
      <hr style="width: 75%; margin-left: -5px;" /> <br /> 
      <div> 
       <table style="border: 1px solid black;"> 
        <th>Date: 
        </td> 
        <td><input type="text" name="linkurl[]" id="Editbox" 
         class="datepicker" 
         style="width: 147px; height: 23px; z-index: 2; color: black" 
         autocomplete="off"></td> 
        </tr> 
        <tr> 
         <th>Remark: 
         </td> 
        </tr> 
        <tr> 
         <td><textarea name="linkdesc[]" size="1" id="Editbox19" 
           style="width: 550px; height: 45px; z-index: 2; color: black" 
           autocomplete="off"></textarea></td> 
        </tr> 
        <script type="text/javascript"> 
         var ct = 1; 
         function new_link() { 
          ct++; 
          var div1 = document.createElement('div'); 
          div1.id = ct; 
          // link to delete extended form elements 
          var delLink = ' <input onclick="delIt(' + ct 
            + ')" type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black; width:50px;height:20px;z-index:136;">'; 

          div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink; 
          document.getElementById('newlink').appendChild(div1); 
         } 
         // function to delete the newly added set of elements 
         function delIt(eleId) { 
          d = document; 
          var ele = d.getElementById(eleId); 
          var parentEle = d.getElementById('newlink'); 
          parentEle.removeChild(ele); 
         } 
        </script> 
        </td> 
        </tr> 
       </table> 
      </div> 
     </font> 
</div> 

Answer 1

您需要設置日期選擇在創建新的輸入元素，但你如何複製尚未有你需要刪除日期選擇器輸入來自新元素的類hasDatePicker。嘗試下面的代碼。

代碼更新http://jsfiddle.net/L3X4D/1/

HTML

<div id="newlink"> 
    <div> 
     <table style="border:1px solid black;"> 
      <tr> 
       <th>Date:</td> 
        <td> 
         <input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off"> 
        </td> 
      </tr> 
      <tr> 
       <th>Remark:</td> 
      </tr> 
      <tr> 
       <td> 
        <textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea> 
       </td> 
      </tr> 
     </table> 
     <br> 
    </div> 
</div> 
<br> 
<p id="addnew"> 
    <input id="clickBTN" type="button" name="linkdesc[]" value="Add More" style="width:80px;height:24px;z-index:136; color:black;"> 
</p> 
<!-- Template --> 
<div id="newlinktpl" style="display:none"><font size="1.5"> 
    <hr style="width:75%; margin-left:-5px;"/><br/> 
<div> 
    <table style="border:1px solid black;"> 
    <th>Date:</td> 
     <td> <input type="text" name="linkurl[]" id="Editbox" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off" > 
     </td></tr> 


     <tr> 
     <th>Remark:</td></tr><tr> 
     <td><textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off" ></textarea> 
     </td></tr> 

    </td> 
    </tr> 
    </table>       
    </div></font> 

</div> 

JS

$(document).ready(function() { 
     $(".datepicker").datepicker({ 
      inline: true, 
      dateFormat: "yy-mm-dd" 
     }); 
     $("#clickBTN").click(function() { 
      new_link() 
     }); 
    }); 

    var ct = 1; 

    function new_link() { 
     ct++; 
     var div1 = $('<div></div>'); 
     $(div1).attr('id', ct); 
     // link to delete extended form elements 
     var delLink = $('<input type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black;  width:50px;height:20px;z-index:136;">'); 

     //set click to remove the element 
     $(delLink).click(function() { 
      $(div1).remove(); 
     }); 

     $(div1).append($('#newlinktpl').html()); 
     $(div1).append(delLink); 
     // remove class hasDatePicker 
     $(div1).find('.datepicker').removeClass("hasDatepicker"); 
     //renema input 
     $(div1).find('.datepicker').attr("ID","newInput"+ct); 
     //set the new input element how datepicker 
     $(div1).find('.datepicker').datepicker({ 
      inline: true, 
      dateFormat: "yy-mm-dd" 
     }); 

     $('#newlink').append(div1); 
    } 
    // function to delete the newly added set of elements 
    function delIt(eleId) { 
     d = document; 
     var ele = d.getElementById(eleId); 
     var parentEle = d.getElementById('newlink'); 
     parentEle.removeChild(ele); 
    } 

Answer 2

至於我記得，使用多個datepickers時，他們需要爲輸入唯一的ID。所以，如果你要添加新的內容，你首先需要獨特的ID。另外，文檔準備好是加載所有文檔元素時發生的單個事件。所以你需要綁定到別的東西。例如

HTML

<div id="linkscontainer"> 
<div id="newlink" class="linkbox"> 
    <div style="border:1px solid black;"> <span>Date:</span> 
     <span><input type="text" name="newdate[]" value="" id="dates" class="date" /><span> 


    <div>Remark:</div> 


<textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea> 

    </span></span></div> 
    <input type="button" class="delete" name="delete" id="delete" value="delete" style="width: 80px; height: 24px; z-index: 136; color: black;">  
    </div> 
    </div> 

<input type="button" id="addnew" name="linkdesc[]" value="Add More" style="width: 80px; height: 24px; z-index: 136; color: black;"> 

的jquery

$(document).ready(function(){ 

var container= $('#newlink').html(); // container to add 
var ids=1; //id numbers for add. datepickers 

$('#addnew').click(function() { 
    $('#linkscontainer').append(container); // add container 
    $('.date:last').attr('id', ids);// each datepicker must have a unique id. 
    $('.delete:last').attr('id', 'f'+ids);// each deletebutton must have a unique id. 
    ids++; // increase the id numbers 

});  

}）;

$(document).on('focus',".date", function(){ //bind to all instances of class "date". 
    $(this).datepicker(); 
}); 

小提琴：

http://jsfiddle.net/M6jZL/

編輯：

刪除按鈕需要以同樣的方式做：把日期選擇器的

$(document).on('focus',".delete", function(){ //bind to all instances of class "date". 
$(this).parent().remove(); 
});