Jquery Datepicker、字符串连接和#selector

Posted

技术标签:

【中文标题】Jquery Datepicker、字符串连接和#selector【英文标题】:Jquery Datepicker, string concatenation, and #selector 【发布时间】:2021-03-28 13:33:17 【问题描述】:

我正在制作一些链接到日期选择器的文本框,所以我制作了一个多样化的功能:

function createDatePickerTextbox(id) 
    var dt = document.createElement("input");
    dt.type = "text";
    dt.id = id;
    var selector = "#" + id;
    $(function() 
        $(selector).datepicker(
            // Stuff
        );
    );

我这样称呼它:

createDatePickerTextbox("datepicker");

它不能按原样工作,但如果我将行 var selector = "#" + id; 更改为 var selector = "#datepicker"; 它确实有效。当我输入断点并查看字符串时,它们看起来完全一样,但只有预先构造的字符串按预期工作。

为什么通过串联构造的字符串不起作用?

编辑:我尝试将selector 作为参数添加到函数并使用"#datepicker" 调用它,但这甚至不起作用。这是怎么回事?

【问题讨论】:

【参考方案1】:

function createDatePickerTextbox(id) 
  var dt = document.createElement("input");
  dt.type = "text";
  dt.id = id;
  var selector = "#" + id;
  $(function() 
    $(selector).datepicker(
        // Stuff
    );
  );


createDatePickerTextbox('test');
createDatePickerTextbox('test1');
 
<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
  <input type="text" id="test" value="" name="test" />
  <input type="text" id="test1" value="" name="test1" />
</body>
</html>

我没有收到任何错误。

【讨论】:

【参考方案2】:

问题最终是由于我一直等到日期选择器初始化之后才将文本框添加到文档中。因为我添加了两个文本框,所以我没有意识到第一个日期选择器在所有情况下都无法附加到任何内容。附加到第一个文本框的实际上是第二个日期选择器,只有当我将函数内的选择器硬编码为与第一个文本框相同时,才会发生这种情况。如果我让选择器依赖于 id,那么第二个选择器也将无法找到它的目标,因为它还没有附加。

看到只附加了第一个日期选择器,我错误地认为在任何情况下都没有显示第二个文本框是一个单独的、不相关的问题,需要在此问题之后解决。但是当我在创建日期选择器之前移动文本框以附加到文档时,两个日期选择器都找到了正确的目标并正确显示。

function createDatePickerTextbox( /*Added:*/ parent, id) 
    var dt = document.createElement("input");
    dt.type = "text";
    dt.id = id;
    parent.appendChild(dt);  // The fix
    var selector = "#" + id;
    $(function() 
        $(selector).datepicker(
            // Stuff
        );
    );

【讨论】:

以上是关于Jquery Datepicker、字符串连接和#selector的主要内容,如果未能解决你的问题,请参考以下文章

jquery ui datepicker怎么设置默认日期

如何设置jquery datepicker默认显示当天日期

使用 Jquery Datepicker 获取日期

PHP 将PHP date()样式dateFormat转换为等效的jQuery UI datepicker字符串

jquery datepicker 选择时间小时的怎么设置

在 jQuery UI datepicker 中仅选择特定日期(日期列表来自 AJAX)