2013-01-11 20 views
0

申請jQuery的日期選擇器這是我的代碼怎樣才能在dyanmic添加文本字段

$(function() { 
    $(".datepicker").datepicker(); 
    }); 

本準則genrating額外的文本精密組件:

<script type="text/javascript"> 
    var counter = 0; 
function add_user1(FieldName) { 
counter++; 
var newFields = document.getElementById(FieldName).cloneNode(true); 
newFields.id = ''; 
newFields.style.display = 'block'; 
var newField = newFields.childNodes; 
for (var i=0;i<newField.length;i++) { 
var theName = newField[i].name 
if (theName) 
newField[i].name = theName + counter; 
} 
var insertHere = document.getElementById(FieldName); 
insertHere.parentNode.insertBefore(newFields,insertHere); 
} 
</script> 

html這部分工作完美,但當我點擊添加更多的字段時,datepicker不起作用。

   **<label id="l" style="width:120px;">Employment History:</label> 
       <br class="clear"/> 
       <label id="l" style="width:80px;">Role:</label> 
       <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_role[]"/> 
       <br class="clear"/> 
       <label id="l" style="width:80px;">Company:</label> 
       <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_com[]"/> 
       <br class="clear"/> 
       <label id="l" style="width:80px;">From:</label> 
       <input class="datepicker" type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]"/> 
       <br class="clear"/> 
       <label id="l" style="width:80px;">To:</label> 
       <input class="datepicker" type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/> 
       <br class="clear"/>** 

據觀察jQuery的壓延機,但是當我把它放在這個特定的DIV日期選取器不工作

   **<div id="add_user1" style="display: none;" >** 
<label id="l" style="width:80px;">Role:</label><input id="l" type="text" size="37" style="width:auto;" name="user_role[]" value="" /><br class="clear"/> 
<label id="l" style="width:80px;">Company:</label><input id="l" type="text" size="37" style="width:auto;" name="user_com[]" value="" /><br class="clear"/> 
<label id="l" style="width:80px;">From:</label><input class="datepicker" type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]" /><br class="clear"/> 
<label id="l" style="width:80px;">To:</label><input class="datepicker" type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/><br class="clear"/></div> 
<input type="button" id="add_user1()" onclick="add_user1('add_user1')" name="btn" value="Add More!" /><br> 
       <br class="clear"/> 
       <!---------Dyanmic Fields ----------> 

回答

1

你應該只需要調用.datepicker();在新的領域他們之後創建。

var counter = 0; 
function add_user(FieldName) { 
    counter++; 
    var newFields = document.getElementById(FieldName).cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes; 
    for (var i=0;i<newField.length;i++) { 
    var theName = newField[i].name 
    if (theName) 
     newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById(FieldName); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 

    $(newFields).find('.datepicker').datepicker(); 
} 

也有你的按鈕的單擊事件一個錯字:從add_user1('add_user1')功能更改爲add_user('add_user1')

工作提琴演示:http://jsfiddle.net/Rykus0/xTqvC/

+0

請查看代碼,我再次更新了我的代碼 –

+0

沒有它不是工作 –

+0

這是一個工作小提琴。 http://jsfiddle.net/Rykus0/xTqvC/在你的按鈕上,將onclick =「add_user1('add_user1')」'更改爲'onclick =「add_user('add_user1')」' –