ajax加载内容,脚本没有执行

时间:2012-09-10 21:29:57

标签: javascript jquery ajax jquery-address

我使用jquery地址插件加载页面,但没有哈希(#)。

的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.

DEMO:http://fbstatusi.com/desavanja/kalendar/mesecna_lista

点击链接Zurka 123

2 个答案:

答案 0 :(得分: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() );之后插入所有脚本

答案 1 :(得分:0)

我遇到过一个案例,一个ajax调用将返回包含需要执行的脚本的新HTML。代码如下:

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

在上面的代码中,response将包含需要执行的脚本,但不会执行。将success回调更改为以下值可以对其进行修复:

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

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