下面的代码有效。如果有更好的方法,请告诉我。如果我使用通过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>
<h1 class='heading'>Page via AJAX</h1>
这是因为您准备将事件绑定到文档上。您必须使用委托才能使其正常工作。喜欢上。这是因为.header加载时不在页面上的页面上。因此没有任何事件。
您的代码应与此类似:
$('body').on('click','.heading',function(){ $(this).css('color','red'); });
它不必是body,但是是准备好文档后不会加载的元素,它是 .heading 的父 级 。