Javascript 新行函数不渲染其他 Javascript 函数答案

【问题标题】：Javascript new row function do not render other Javascript functionJavascript 新行函数不渲染其他 Javascript 函数
【发布时间】：2014-08-18 22:41:17
【问题描述】：

我正在显示一个内部带有 texbox 的表格，其中某些 texbox 具有呈现日历的 datepicker 类。我正在尝试通过单击提供的链接在表格中添加一行。我可以添加行，但行内的新 texboxes 不显示日期选择器日历。

    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>

【问题讨论】：

您是否有理由同时使用$ 和jQuery 并拥有两个文档就绪处理程序？

标签： javascript jquery html dom html-table

【解决方案1】：

当你这样做时：

$(".datepicker")

您正在选择当前存在于 DOM 中的所有具有 datepicker 类的元素。您不做的是选择可能具有datepicker 类的元素，这些元素可能会在一段时间后存在。

因此，在创建新行后，您需要做的是选择子元素并再次对其应用.datapicker。

你可能只是做这样的事情：

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

在创建新行之后。

为了避免大量重复，我只是将 datepicker 的参数存储在某个变量中：

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);
});

【讨论】：

请你设置一个示例代码。我不太擅长 javascript。谢谢你
我的意思是我不知道把你输入的代码放在哪里。我需要知道放置代码的区域。我必须在 newRow 函数中放入什么配置。我是一名 PHP 初学者，尝试使用 JS 运气。
@Xia：当我说“在你创建 newRow 之后。”时，我已经很清楚地告诉你该放在哪里了。
好的，谢谢。我将它添加到表中，但它仍然没有向行中新添加的 texboxes 添加日历。这是演示的链接。 irsp.org.pk/jobs/indexn.php
哇，你做到了。 hasDatepicker 被重复了。我很高兴。非常感谢。

【解决方案2】：

尝试使用新输入的id：

... 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()
});

}

【讨论】：