Question

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

我已在index.html＆amp;中为index.html 编写了js 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的点击功能不会触发。

有没有可能的方法来实现这一目标？

Answer 1

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

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

});

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

Answer 2

您可以创建一个函数来设置您的事件处理程序，并且不要忘记使用.off来设置触发器。和afer $("#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>

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

2 个答案: