Question

我有一个应用程序，它从包含模板页面的多个页面片段构建页面内容。这些片段中的一个或多个需要在加载文档时运行JavaScript，并且将片段特定代码放入包含片段的模板页面中是没有意义的。虽然这种方法对我很有帮助，但是在尝试根据用户与页面的交互通过Ajax更新片段时遇到了问题。

我在模板页面（全局范围代码）和片段（片段特定代码）中使用jQuery和$(document).ready(function() {...});。问题是，当在jQuery丰富的HTML元素版本上使用jQuery的.html(HTML code from Ajax response)更新片段并且Ajax响应本身包含$(document).ready(function() {...});代码时，HTML内容会很好地更新，但JS不会执行。

有人建议在Ajax响应中的JS片段上使用eval()，而其他人禁止它。我希望有人会用这个推动我朝着正确的方向发展。

$.ajax({
    type: 'POST',
    url: $(formObj).attr('action'),
    data: $(formObj).serialize(),
})
.done(function(data, textStatus, jqXHR) {
    $response = $(data.replace(/<body(.*?)>/,'<body$1><div id="ajaxResBody">').replace('</body>','</div></body>'));
    $('#fragmentContent').html($response.find('#fragmentContent').html());
});

<div id="fragmentContent">...</div>是使用从Ajax响应中提取的部分内容更新的片段之一。最初加载页面时，片段的内容DOM看起来大致如下：

<div id="fragmentContent">
    <p>...</p>
    <div>...</div>
    <script type="text/javascript">
        $(document).ready(function() {
            // JS code
        });
    </script>
</div>

但是当通过Ajax替换相同片段的内容时，DOM看起来像这样：

<div id="fragmentContent">
    <p>...</p>
    <div>...</div>
</div>

很明显，脚本被剥离了。我通过使用以下代码验证了这一点：

if (data.indexOf('accordion(') >= 0) {
    console.log('scripts found in Ajax response');
    if ($response.find('#fragmentContent').html().indexOf('accordion(') >= 0) {
        console.log('scripts inserted into fragment');
    }
    else {
        console.log('scripts stripped before content inserted into fragment!');
    }
}
else {
    console.log('scripts did not even make it in the Ajax response!');
}

并产生以下日志输出：

scripts found in Ajax response
scripts stripped before content inserted into fragment!

运行jQuery的$（document）.ready（function（）{...}）;在Ajax响应中

0 个答案: