Jquery Datepicker, string concatenation, and #selector
Question
I am making a few textboxes linked to datepickers, so I made a function of the variety:
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; to 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. What is going on here?
2 answers
solution1
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.
solution2
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. 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.
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
});
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.