下面的代码有效。如果有更好的方法,请告诉我。如果我使用通过ajax加载test.html的主页中test.html中存在的脚本内容。该脚本不起作用。
<html>
<head>
<script src='jquerylocation' type='text/javascript'></script>
</head>
<body>
<div id='ajaxload'></div>
<button class='test'>load content via ajax</button>
</body>
<script>
$(function(){
$('.test').on('click',function(){
$('#ajaxload').load('test.html');
});
});
</script>
</html>
Test.html:
<h1 class='heading'>Page via AJAX</h1>
<script>
$(function(){
$('.heading').on('click',function(){
$(this).css('color','red');
});
});
</script>
我们必须根据需要通过ajax加载脚本以及动态加载的内容,但是我感到的缺点是每次我们发送ajax请求脚本时总是与内容一起加载。但是我只找到了这种解决方案。如果有人知道更好的解决方案,请回复。
例如,如果以这种方式更改代码将无法正常工作。
<html>
<head>
<script src='jquerylocation' type='text/javascript'></script>
</head>
<body>
<div id='ajaxload'></div>
<button class='test'>load content via ajax</button>
</body>
<script>
$(function(){
$('.test').on('click',function(){
$('#ajaxload').load('test.html');
});
$('.heading').on('click',function(){
$(this).css('color','red');
});
});
</script>
</html>
Test.html:
<h1 class='heading'>Page via AJAX</h1>
这是因为您准备将事件绑定到文档上。您必须使用委托才能使其正常工作。喜欢上。这是因为.header加载时不在页面上的页面上。因此没有任何事件。
您的代码应与此类似:
$('body').on('click','.heading',function(){
$(this).css('color','red');
});
它不必是body,但是是准备好文档后不会加载的元素,它是.heading的父级。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句