Jquery 日期选择器、字符串连接和#selector
[英]Jquery Datepicker, string concatenation, and #selector
问题描述
I am making a few textboxes linked to datepickers, so I made a function of the variety:
我正在制作一些链接到日期选择器的文本框，所以我制作了一个 function 的品种：
function createDatePickerTextbox(id) {
var dt = document.createElement("input");
dt.type = "text";
dt.id = id;
var selector = "#" + id;
$(function() {
$(selector).datepicker({
// Stuff
});
});
}
I am calling it like this:我这样称呼它：
createDatePickerTextbox("datepicker");
It doesn't work as is, but if I change the line var selector = "#" + id;它不能按原样工作，但是如果我更改行var selector = "#" + id; to var selector = "#datepicker";到var selector = "#datepicker"; it does work.它确实有效。 When I put in a breakpoint and look at the strings, they look exactly the same, but only the preconstructed string works as expected.当我输入断点并查看字符串时，它们看起来完全一样，但只有预先构造的字符串按预期工作。
Why doesn't the string constructed through concatenation work?为什么通过连接构造的字符串不起作用？
EDIT: I tried adding selector as a parameter to the function and calling it with "#datepicker" , but that doesn't even work.编辑：我尝试将selector作为参数添加到 function 并使用"#datepicker"调用它，但这甚至不起作用。 What is going on here?这里发生了什么？
2 个解决方案
解决方案1
0 2020-12-18 02:13:38
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>
I didn't get any error.我没有收到任何错误。
解决方案2
0 2020-12-18 06:08:00
The issue ended up being due to the fact that I was waiting until after the datepicker was initialized before adding the textbox to the document.问题最终是由于我一直等到日期选择器初始化之后才将文本框添加到文档中。 Because I was adding two textboxes, I didn't realize that the first datepicker was failing to attach to anything in all cases;因为我添加了两个文本框，所以我没有意识到第一个日期选择器在所有情况下都无法附加到任何内容。 what attached to the first textbox was actually the second datepicker, and this could only happen when I hard-coded the selector inside the function to be the same as the first textbox.附加到第一个文本框的实际上是第二个日期选择器，只有当我将 function 中的选择器硬编码为与第一个文本框相同时，才会发生这种情况。 If I made the selector dependent on the id, then the second one would also fail to find its target because it hasn't been attached yet.如果我使选择器依赖于 id，那么第二个选择器也将无法找到它的目标，因为它尚未附加。
Seeing only the first datepicker get attached, I mistakenly thought that the second textbox not showing up under any circumstance was a separate, unrelated problem to be resolved after this issue.只看到第一个日期选择器被附加，我错误地认为在任何情况下都没有显示第二个文本框是一个单独的、不相关的问题，需要在这个问题之后解决。 But when I moved the textbox to be attached to the document before creating the datepickers, both datepickers found their correct target and showed up properly.但是当我在创建日期选择器之前移动文本框以附加到文档时，两个日期选择器都找到了正确的目标并正确显示。
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
});
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.