index.js
$(function(){
$("#btn").on("click",function(){
$.ajax({
url: 'page.html',
type: 'post',
success: function (responseText) {
$('#div1').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="加载" />
<div id="div1"></div>
page.html
<input type="button" id="test" value="执行" />
请问:
当demo页面加载page页面后,html代码就会被加载到div1容器里面,之间加载的index.js对于新内容不起作用,点击执行按钮是无效的。
请问如何让加载的页面中javascript代码能够执行?
实践场景:页面依赖第三方表单验证(通过class属性定义验证规则),动态新添加了表单元素,可是新表单元素的验证规则不起作用。
我试了下,将type改为get,可以执行的;
ajax加载的js代码要想执行应该这样写
$(document).on('click','.button',function(){
test();
})
插入的脚本是不能被执行的~
jquey的html方法使用了原生的innerHTML属性,而对这个属性的赋值时,其中的script标签中的代码将会被无视,不会被解析。
但是加载元素属性上的JS代码是可以被执行的
如:
<input type="button" onclick="javascript:alert('hello world!');" value="执行" />
<script type="text/javascript">
$(function(){
function test() {
alert('hello world!');
}
})
</script>
<input type="button" onclick="test();" value="执行" />
朋友,你的需求应该是点击某个控件,让一个div 加载一个html页面对吧?那么这个就简单了,jq有个方法,底层就已经实现了ajax ,比如说,我点击一个id是btn的按钮,然后在id为box的div 里边显示一个名字为page.html的网页,在jq你可以这么写
<script>
$("#btn").click(function(){
$("#box").load("page.html");
});
</script>
这样子应该就可以了。
$(function(){
$("#btn").on("click",function(){
$.ajax({
url: 'page.html',
type: 'post',
success: function (responseText) {
$('#div1').html(responseText);
}
});
});
$("#div1").on("click", "#test", function(){
alert('hello world!');
});
});
.on( events [, selector ] [, data ], handler )
你加载到div1以后,js的路径有可能变化。看看是不是这个问题,如不是,可以js在ajax页面后动态加载page里的js。
目前的想到的做法是将原来的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="执行" />
有更优雅的做法么?
要用jq的live方法。