如何从使用jquery load(）加载的另一个html页面执行在主html文件中编写的脚本

How to execute script written in main html file from another html page loaded using jquery load()

本文关键字：html 执行 文件 脚本 另一个 jquery load 加载      更新时间：2024-05-03

我有两个文件index.html和subpage.html。使用jquery load()，我将subpage.html加载到index.html的div #result中。

我在index.html中为index.html&subpage.html。

页面如下：

index.html:

<script type="text/javascript">
   $("document").ready(function(e) {
      $("#result").load('subpage.html');
   });
</script>
<div id="result"></div>

subpage.html:

<p>Sub page</p>
<input type="button" id="clickMe" value="Click" />

但在这里，为按钮#clickMe在索引中编写的单击函数在单击按钮时不会触发。

有什么可能实现这一点的方法吗？

如果要使用.on委派，则必须将事件附加到更高级别的元素，并将对象或类指定为委派。

$('body').on('click',"#clickMe", function(){
alert('clicked dynamic dom element');
});

http://api.jquery.com/on/

您可以创建一个函数来设置事件处理程序，并且不要忘记使用.off来设置触发器。并且在$("#result").load('subpage.html');之后调用该函数。

function setEventHandler(){
    $('#clickMe').off('click').on('click',function(){
        // codes here
        alert('Clicked');
    });
}

您的代码将是：

<script type="text/javascript">
   $("document").ready(function(e) {
      $("#result").load('subpage.html');
      setEventHandler();
   });
</script>
<div id="result"></div>
相关文章：