为输入文本调用 javascript，该输入文本是表中动态添加的行的一部分

Question

我需要一个 datetimepicker 来弹出日期输入字段的 onclick，日期选择器在 javascript 函数中定义，如下所示：

  function loadcalendar(){
   jQuery(function() { 
                            $('#ar_startdate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                              });
                            $('#ar_enddate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                             });
          });
 } 

现在，当我将输入字段作为行附加到表中后，动态地将输入字段填充到表行中时，我正在调用加载日历 像这样的：

// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
    $("#table_newrole img.move-row").live("click", function() {
     $("#table_rolecart tbody").append('<tr><td>Start Date: <input type="text" value="" id="ar_startdate"></td><td>End Date: <input type="text" value="" id="ar_enddate </td></tr>');
   loadcalendar();

通过上述设置，日期选择器仅在第一个 iem 中显示，因为所有输入文本字段都共享相同的 id，所以我如何从索引创建一个 id 并在附加该行后将每个与 datepicker 相关联。 问候， 普里扬克

Answer 1

确保您始终只有 1 个具有特定 ID 的元素。如果要添加多行，则需要使用类。试试这个：

 function loadcalendar(){
       $('.ar_startdate:not(.parsed)').datetimepicker({ 
           dateFormat: 'yy-mm-dd',
           showSecond: true,
           timeFormat: 'hh:mm:ss'
       }).addClass("parsed");
       $('.ar_enddate:not(.parsed)').datetimepicker({ 
           dateFormat: 'yy-mm-dd',
           showSecond: true,
           timeFormat: 'hh:mm:ss'
       }).addClass("parsed");
 } 
// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
     $("#table_newrole img.move-row").live("click", function() {
         $("#table_rolecart tbody").append('<tr><td>Start Date: <input type="text" value="" class="ar_startdate"></td><td>End Date: <input type="text" value="" class="ar_enddate </td></tr>');
         loadcalendar();
     });
 });

我添加了 .parsed 来检查输入是否已经被转换。我不知道您选择的插件是什么，但以防万一。无论如何，还有其他方法可以实现相同的目标，例如：

 var config = {
     dateFormat: 'yy-mm-dd',
     showSecond: true,
     timeFormat: 'hh:mm:ss'
 };
 var newRowAndBind = function(){
     var row = $('<tr><td>Start Date: <input type="text" value="" class="ar_startdate"></td><td>End Date: <input type="text" value="" class="ar_enddate </td></tr>');
     row.find(".ar_startdate").datetimepicker(config);
     row.find(".ar_enddate").datetimepicker(config);
     row.appendTo("#table_rolecart tbody");
 };
 $(document).ready(function() {
     $("#table_newrole img.move-row").bind("click", newRowAndBind);
 });

Answer 2

以下内容可能会起作用：

var $tr = $('<tr><td>Start Date: <input type="text" value="" id="ar_startdate" /></td><td>End Date: <input type="text" value="" id="ar_enddate"/></td></tr>');

$('#ar_startdate', $tr).datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                              });
$('#ar_enddate', $tr).datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                             });
$("#table_rolecart tbody").append($tr);

此外，我宁愿将 ar_startdate 和 ar_enddate 作为类属性而不是 id，因为 ID 在您的文档中应该是相同的。