Question

我在加载主HTML后会加载一个外部HTML。

<!--external.html-->
<form id="externalForm">
    <div id="button">Button</div>
</form>

如何为“按钮”添加事件处理程序？

在主HTML中尝试了以下代码，

<!--main.html-->
<body>
<div id="extForm"></div><!--to be loaded when document.ready-->

<script>
$(document).ready(function() {
    // Fill extForm with div's declared in external.html
    $("#extForm").load("external.html");
}
// button.ready will be triggered after loading external.html
$("#button").ready(handlerCreator());

var handlerCreator = function () {
   return function() {
       alert("Working"); // since button is ready
       $("#button").on("click", function() {
           alert("Not working"); // why?
       });
   };
}

</script>

Answer 1

Button没有就绪处理程序......您需要使用事件委派

使用事件委派来注册#button

的处理程序

$(document).ready(function () {
    $("#extForm").load("external.html");
})
$("#extForm").on('click', '#button', function () {
    alert('button clicked')
});

或在外部文件加载到dom

后注册处理程序

$(document).ready(function () {
    $("#extForm").load("external.html", function () {
        $("#button").click(function () {
            alert('button clicked')
        });
    });
})

为HTML中声明的元素加载外部HTML和添加事件处理程序

1 个答案: