Javascript新行函數不會呈現其他Javascript函數

我正在顯示裏面有texbox的表格，其中某些texboxes具有呈現日曆的datepicker類。我想通過點擊提供的鏈接在表格中添加一行。我可以添加行，但行內的新texboxes不顯示datepicker日曆。Javascript新行函數不會呈現其他Javascript函數

jQuery(function(){ 
     var counter = 5; 
     jQuery('a.sumJobs').click(function(event){ 
      event.preventDefault(); 
      counter++; 
      var newRow = jQuery('<tr><td>'+ counter +'</td><td><input type="text" name="designation[]" id="employer3" /></td><td><input name="from[]" type="text" class="datepicker hasDatepicker" id="from'+ counter +'" /></td' + 
       counter + '><td><input name="to[]" type="text" class="datepicker hasDatepicker" id="to'+ counter +'" /></td>' + 
       counter + '<td><input type="text" name="totalexp[]" id="totalexp" /></td></tr>'); 
      jQuery('table.sumJobs').append(newRow); 
     }); 
    }); 

    $(function() { 
     $(".datepicker").datepicker({ 
      changeMonth: true 
      ,changeYear: true 
      ,yearRange: '1960:' + new Date().getFullYear() 
     }); 
    });

這裏是呈現一個新行鏈路

<a href="#" title="" class="sumJobs"><center>Add another experience</center></a>

來源

2014-06-27 Xia

有沒有您同時使用'$'和'jQuery'，有兩個文件準備好處理的理由？ –

當你這樣做：

$(".datepicker")

您選擇所有具有datepicker類，目前存在的元素DOM。你在做什麼而不是這樣做是選擇可能有datepicker類在一段時間後存在的元素。

因此，創建新行後需要執行的操作是選擇子元素並將.datapicker再次應用到它。

你很可能只是這樣做：

newRow.find(".datepicker").datepicker({ 
    //...your configuration goes here 
});

後創建NEWROW。

爲了避免很多重複，我只是日期選擇的參數存儲在一個變量的地方：

var pickerOptions = { 
     changeMonth: true 
     ,changeYear: true 
     ,yearRange: '1960:' + new Date().getFullYear() 
}

，那麼你可以這樣做：

newRow.find(".datepicker").datepicker(pickerOptions);

所以，你可以換它全部如下：

$(function(){ 
    var counter = 5; 
    $('a.sumJobs').click(function(event){ 
     event.preventDefault(); 
     counter++; 
     var newRow = jQuery('<tr><td>'+ counter +'</td><td><input type="text" name="designation[]" id="employer3" /></td><td><input name="from[]" type="text" class="datepicker hasDatepicker" id="from'+ counter +'" /></td' + 
      counter + '><td><input name="to[]" type="text" class="datepicker hasDatepicker" id="to'+ counter +'" /></td>' + 
      counter + '<td><input type="text" name="totalexp[]" id="totalexp" /></td></tr>'); 
     $('table.sumJobs').append(newRow); 
     newRow.find(".datepicker").datepicker(pickerOptions); 
    }); 

    var pickerOptions = { 
     changeMonth: true 
     ,changeYear: true 
     ,yearRange: '1960:' + new Date().getFullYear() 
    }; 

    // if there are no .datepicker elements at the start, you don't actually need the following line 
    $(".datepicker").datepicker(pickerOptions); 
});

來源

2014-06-27 18:14:24

請您設置一個示例代碼。我對javascript不太瞭解。謝謝YOu – Xia

@Xia：我已經做到了。你不瞭解什麼部分？ –

我的意思是我不知道把你輸入的代碼放在哪裏。我需要知道區域放置代碼。我需要將哪些配置放入newRow函數中。我是一個PHP初學者，試圖用JS運氣。 – Xia

嘗試使用新輸入的編號：

... jQuery('table.sumJobs').append(newRow); $("#to" + counter).datepicker({ changeMonth: true ,changeYear: true ,yearRange: '1960:' + new Date().getFullYear() }); 也許你可以有一個像

function createCalendar(element){ 
element.datepicker({ 
    changeMonth: true 
    ,changeYear: true 
    ,yearRange: '1960:' + new Date().getFullYear() 
});

}功能

來源

2014-06-27 18:33:06

Javascript新行函數不會呈現其他Javascript函數

回答

相關問題