ajax 中的 javascript 响应在 Firefox、Chrome、Opera 但不是 Internet Explorer 11 中有效 - 对象不支持此属性或方法

Question

我试图在其他帖子中找到我的问题的答案，但不幸的是我找不到任何解决问题的答案。

因此，我正在尝试通过 AJAX 请求 jquery 日期选择器。我已经在这里上传了示例。您可以在 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 中可以顺利运行。此问题可能与某些服务器设置有关吗？

Answer 1

如果您仍想通过 ajax return 混合 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) 从响应中删除 JS 代码 /htmlJson.php

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 中有效 - 对象不支持此属性或方法

javascript in ajax response works in Firefox, Chrome, Opera BUT NOT internet explorer 11 - Object does not support this property or method

javascript

ajax

jquery

internet-explorer-11

ajax 中的 javascript 响应在 Firefox、Chrome、Opera 但不是 Internet Explorer 11 中有效 - 对象不支持此 属性 或方法

javascript in ajax response works in Firefox, Chrome, Opera BUT NOT internet explorer 11 - Object does not support this property or method

javascript

ajax

jquery

internet-explorer-11

ajax 中的 javascript 响应在 Firefox、Chrome、Opera 但不是 Internet Explorer 11 中有效 - 对象不支持此属性或方法