我试图在其他帖子中找到我的问题的答案，但不幸的是我找不到任何可以解决问题的答案。
所以，我试图通过 AJAX 请求一个 jquery Datepicker。我已将示例上传到此处。您可以在 Firefox、Chrome 或 Opera 中查看工作示例:
不幸的是，这在 Internet Explorer 11 中不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<h1>Json javascript example</h1>
<button id="requestHtml" onclick="callAjax()">request new HTML</button>
<div id="emptyDiv"></div>
</body>
</html>
JavaScript 代码如下所示:
function callAjax()
{
$.ajax({
url: "/htmlJson.php",
dataType: 'json',
cache : false,
type: 'post',
data: '',
error: function(){
alert("Error in Ajax response");
},
success: function(response)
{
$("#emptyDiv").html(response.htmlCode);
}
});
}
最后是 htmlJson.php 中的代码:
<?php
$json = array(
'success' => true,
'htmlCode' => ""
);
$data = '
<div class="form-group">
<input type="text" id="Birthdate" class="form-control" style="background-color:#ffffff; color:gray" value="Birthdate" readonly placeholder="Birth date" />
</div>
<script>
$("#Birthdate").datepicker({
changeMonth: true,
changeYear: true,
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd"
});
</script>
';
$json['success'] = true;
$json['htmlCode'] = $data;
echo json_encode($json);
?>
当我在 Firefox、Chrome 和 Opera 中运行它时，它运行良好，并且在单击生日表单时会显示日期选择器。然而，在 Internet Explorer 11 中，它在 eval 代码中显示警报:
Object does not support this property or method
我读到不应在 ajax 响应中混合 html 代码和 javascript 代码。然而我在其他例子中看到了这种情况。
根据其他答案，我还尝试将 javascript 代码直接放入成功回调函数中。不幸的是同样的行为。适用于 Firefox、Chrome 和 Opera，但不适用于 Internet Explorer 11。它再次表明此元素不支持该方法。
提前感谢您的帮助!
干杯斯特凡
<小时/>更新
我刚刚发现，如果我让它在我的 XAMPP 上本地运行，它可以在 IE11 中顺利运行。此问题是否与某些服务器设置有关？
最佳答案
如果您仍然想通过 ajax 返回混合的 html+js 代码，请尝试将 js jQuery 代码包装到 jQuery.ready 事件处理程序中，如下所示:
jQuery(document).ready(function($) {
$("#Birthdate").datepicker({
changeMonth: true,
changeYear: true,
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd"
});
});
UPD
这是更新版本:
1) 从响应/htmlJson.php 中删除 JS 代码
2)相应地修改你的scripts.js
//code for scripts.js
function initDatePicker(){
$("#Birthdate").datepicker({
changeMonth: true,
changeYear: true,
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd"
});
}
function callAjax()
{
$.ajax({
url: "/htmlJson.php",
dataType: 'json',
cache : false,
type: 'post',
data: '',
error: function(){
alert("Error in Ajax response");
},
success: function(response)
{
$("#emptyDiv").html(response.htmlCode);
initDatePicker();
}
});
}
UPD2
jQuery(document).ready(function($) {
var initDatePicker = function(){
$("#Birthdate").datepicker({
changeMonth: true,
changeYear: true,
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd"
});
}
var callAjax = function() {
$.ajax({
url: "htmlJson.php",
dataType: 'json',
cache : false,
type: 'post',
data: '',
error: function(){
alert("Error in Ajax response");
},
success: function(response)
{
$("#emptyDiv").html(response.htmlCode);
initDatePicker();
}
});
}
});
关于ajax 响应中的 javascript 适用于 Firefox、Chrome、Opera，但不适用于 Internet Explorer 11 - 对象不支持此属性或方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31025790/