ajax 加载内容，脚本未执行

Posted 2023-05-07

【中文标题】ajax 加载内容，脚本未执行

【英文标题】：ajax loaded content, script is not executing

【发布时间】：2012-09-03 19:06:39

【问题描述】：

我正在使用 jquery 地址插件来加载页面，但没有 hash(#)。

index.html:

<a href="page.html">Link</a>
<div id="content">

    <script>

        $(document).ready(function() 

            $.address.init(function(event) 

                $('a').address();

            ).change(function(event) 
                // do something depending on the event.value property, e.g.
                console.log(event.value);

                $.ajax(
                    type: "POST",
                    url: event.value,
                    success: function(msg)
                        $('#content').html( $(msg).find("#content").html() );
                    
                );
            );
            $('a').click(function(e) 
                $.address.value($(this).attr('href'));

            );
        );

    </script>


</div>

page.html:

<div id="content">
    <p>text</p>
    <script>
        $(document).ready(function() 
            alert('loaded');
        );
    </script>

</div>

在#content div中将从page.html加载#content html（也许我应该使用其他函数，而不是.html（），请纠正我），在那个div是脚本标签，但我没有收到警报页面是从 ajax 加载的，它可以在没有 ajax 加载的情况下运行。 有人可以帮我吗？

编辑： 当我尝试单击带有 js 函数的链接时出现此错误：

XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for HTTP.

演示：http://fbstatusi.com/desavanja/kalendar/mesecna_lista

点击链接Zurka 123

【问题讨论】：

你能在JSFiddle上发布一个演示吗？

根本无法在 jsfiddle 上运行 :(

你在某处有 href="javascript:..." 吗？

是的，我有，这样我试图点击删除评论，我得到了那个错误。

好吧，XMLHTTPRequest 就是不能像 javascript:...那样加载 url，所以你必须使用 onclick 而不是 href="javascript:..."

【参考方案1】：

document.ready 仅在加载文档时发生一次。 AJAX 请求不会导致它。

<div id="content">
    <p>text</p>
    <script type="text/javascript">
            alert('loaded');
    </script>
</div>

这应该可行。 还可以尝试将$(msg).find("#content").html() 更改为$(msg).find("#content")[0].innerHTML，因为 jquery html 会去除标签。

编辑

看看这个thread 有一个关于为什么会发生的长时间讨论。在这种情况下$(msg) jquery 将始终删除脚本标签。但同时$(msg).filter("script")返回脚本，所以你可以先找到那些脚本，然后在$('#content').html( $(msg).find("#content").html() );后面全部插入

【讨论】：

不起作用。我认为问题出在 .html() 上，因为当我检查元素时，我在 #content div 中看不到脚本标签。

当我尝试点击 js 函数链接时出现此错误：XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for HTTP.。

对不起。我错过了你有 $(msg)。这是一个有效的 JS fiddle，但它不使用 ajax 加载代码

试用演示：fbstatusi.com/desavanja/kalendar/mesecna_lista 点击zurka 123 链接

无法测试它是否真的有效，但假设这应该有效：$('#main_content').html( $('#main_content', myhtml).contents() ); var scripts = myhtml.filter("script"); for(var i = 0; i < scripts.length; i++) $("body").append(scripts[i]);

【参考方案2】：

我遇到过这样一种情况，即 ajax 调用会返回包含需要执行的脚本的新 HTML。代码如下所示：

$.ajax('/url', 
  method: 'get',
  success: function(response) 
    document.getElementById("my-body").innerHTML = response;
  
);

在上面的代码中，response 将包含需要执行的脚本，但它不会执行。将 success 回调更改为以下修复它：

$("#my-body").html(response);

我不确定为什么会这样（显然它与.html() 方法的实现有关）。也许有人可以发表评论并给出解释