php JQuery日期选择器在ajax调用后不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20453879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery datepicker not working after ajax call
提问by Jinu Joseph Daniel
I have the following code
我有以下代码
<html>
<head>
//included all jquery related stuff ..not shown here
</head>
<body>
<button id = 'btn' />
<div id = 'ct'>
<?php echo file_get_contents('my_ajax_stuff.php'); ?>
</div>
</body>
<script>
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
</script>
</html>
The page
这一页
my_ajax_stuff.php
my_ajax_stuff.php
contains a jquery ui datepicker with class = 'datepicker'.On the first load the datepicker works.But when I click on the button to reload it again , the contents are replaced with new contents.But the datepicker is not working.I have tried initialising the datepicker inside the ajax success handler ,as you see.But it also failed.What is the issue.How can it be solved???
包含一个带有 class = 'datepicker' 的 jquery ui datepicker。在第一次加载时，datepicker 可以工作。但是当我再次单击按钮重新加载它时，内容被新内容替换。但是 datepicker 不起作用。我试过了如您所见，在 ajax 成功处理程序中初始化日期选择器。但它也失败了。这是什么问题。如何解决？？？
回答by Moeed Farooqui
You need to reinitializethe date picker in Ajax success
您需要reinitialize在 Ajax 成功中使用日期选择器
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
$( "#datepicker" ).datepicker();
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
回答by Gotschi
The answer you are looking for may be similar to this question: jQuery datepicker won't work on a AJAX added html element
您正在寻找的答案可能类似于这个问题： jQuery datepicker won't work on a AJAX added html element
You're replacing the datepicker element in the DOM with the ajax response. The reason this works for the first time is that PHP renders the my_ajax_stuff.php on first load already in the HTML so it becomes available to jQuery in the DOM.
您正在用 ajax 响应替换 DOM 中的 datepicker 元素。这第一次起作用的原因是 PHP 在第一次加载时渲染了 my_ajax_stuff.php 已经在 HTML 中，因此它在 DOM 中可供 jQuery 使用。
// do this once the DOM's available...
$(function(){
// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
$("body").on("click", ".datepicker", function(){
$(this).datepicker();
$(this).datepicker("show");
});
});
回答by bizco
I came across this question because I was having the same problem as OP.
我遇到了这个问题，因为我遇到了与 OP 相同的问题。
Mooed Farooqui's recommendation to reinitializein Ajax success worked, but not initially.
Mooed Farooqui 对reinitializeAjax 成功的建议奏效了，但最初并不奏效。
Ended up that I was also calling the datepickerfunction in my equivalent of my_ajax_stuff.php. After I took that out it worked perfectly on button reload and postbacks. Hope this helps someone that stumbles upon this old question...
最终我也在datepicker我的等价物调用了该函数my_ajax_stuff.php。在我把它拿出来后，它在按钮重新加载和回发上工作得很好。希望这可以帮助那些偶然发现这个老问题的人......
回答by Waleed Abdalmajeed
回答by CodePrime8
This may be a primitive solution, but I found that If I have in my main document a function MakeDatePicker and I used it in the OnChange portion of my input, I was able to make any object, ajax, or otherwise, turn into a date picker before, and after an ajax call. Here is the function and the call. (please note, I have ColdFusion # functions, as this is a return on a coldfusion query with a CFOutput.)
这可能是一个原始的解决方案，但我发现如果我的主文档中有一个函数 MakeDatePicker 并且我在我的输入的 OnChange 部分使用它，我能够使任何对象、ajax 或其他方式变成日期ajax 调用之前和之后的选择器。这是函数和调用。（请注意，我有 ColdFusion # 函数，因为这是对带有 CFOutput 的 ColdFusion 查询的返回。）
<td><input type="date" class="EstDeliveryDatePicker" chassis="#chassis#" value= "#DateFormat(EstDelivery,'mm/dd/yy')#" onclick="MakeDatePicker(this);"></input></td>
here is the function at the top of my page:
这是我页面顶部的功能：
function MakeDatePicker(obj) { $(obj).datepicker({ changeMonth: true, changeYear: true }); $(obj).datepicker("show"); }like I said, its crude, but it works.
就像我说的，它很粗糙，但它有效。
I was having an issue with the way my tables would display their sorts. I have it so when you enter the page, you have 1 field that you can click on to select a date. If you click on one of the headers, it would sort SQL command, and re-display the table. This would break the .datepicker function. So I change it to not read off the class, but make the click, trigger the function. the problem with trying to get it to run on the .class was it would initialize after the table was redrawn and lose the scope of the DOM.
我的表格显示种类的方式有问题。我有它，所以当你进入页面时，你有 1 个字段，你可以点击它来选择一个日期。如果单击其中一个标题，它将对 SQL 命令进行排序，并重新显示该表。这会破坏 .datepicker 功能。所以我将其更改为不读取类，而是单击，触发功能。试图让它在 .class 上运行的问题是它会在表重绘后初始化并失去 DOM 的范围。
