javascript - jquery ajax加载页面中的js代码如何执行？

Question

index.js

$(function(){
    $("#btn").on("click",function(){
        $.ajax({
            url: 'page.html',
            type: 'post',
            success: function (responseText) {
                $('#p1').html(responseText);
            }
        });
    });
    $("#test").on("click",function(){
        alert('hello world!');
    });
});

demo.html

<script type="text/javascript" src="index.js"></script>
<input type="button" id="btn" value="加载" />
<p id="p1"></p>

page.html

<input type="button" id="test" value="执行" />

请问：
当demo页面加载page页面后，html代码就会被加载到p1容器里面，之间加载的index.js对于新内容不起作用，点击执行按钮是无效的。

请问如何让加载的页面中javascript代码能够执行？

实践场景：页面依赖第三方表单验证（通过class属性定义验证规则），动态新添加了表单元素，可是新表单元素的验证规则不起作用。

---

Answer 1

插入的脚本是不能被执行的~
jquey的html方法使用了原生的innerHTML属性，而对这个属性的赋值时，其中的script标签中的代码将会被无视，不会被解析。
但是加载元素属性上的JS代码是可以被执行的
如:

<input type="button" onclick="javascript:alert('hello world!');" value="执行" />

Answer 2

要用jq的live方法。

Answer 3

<script type="text/javascript">
    $(function(){
        function test() {
            alert('hello world!');
        }
    })
</script>
<input type="button" onclick="test();" value="执行" />

Answer 4

你加载到p1以后，js的路径有可能变化。看看是不是这个问题，如不是，可以js在ajax页面后动态加载page里的js。

Answer 5

朋友，你的需求应该是点击某个控件，让一个p 加载一个html页面对吧？那么这个就简单了，jq有个方法，底层就已经实现了ajax ，比如说，我点击一个id是btn的按钮，然后在id为box的p 里边显示一个名字为page.html的网页，在jq你可以这么写

<script>
    $("#btn").click(function(){
        $("#box").load("page.html");
    });
</script>

这样子应该就可以了。

Answer 6

我试了下，将type改为get,可以执行的；

Answer 7

ajax加载的js代码要想执行应该这样写

$(document).on('click','.button',function(){
  test();
})

Answer 8

目前的想到的做法是将原来的js分拆，未被执行的js放入ajax的返回结果中：

新增
test.js

$(function(){
    $("#test").on("click",function(){
        alert('hello world!');
    });
});

修改
page.html

<script type="text/javascript" src="test.js"></script>
<input type="button" id="test" value="执行" />

有更优雅的做法么？

Answer 9

$(function(){
    $("#btn").on("click",function(){
        $.ajax({
            url: 'page.html',
            type: 'post',
            success: function (responseText) {
                $('#p1').html(responseText);
            }
        });
    });
    $("#p1").on("click", "#test", function(){
        alert('hello world!');
    });
});

.on( events [, selector ] [, data ], handler )

Answer 10

使用：getScript() 方法 http://www.w3school.com.cn/jq...