gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 08:00:16 26 4
gpt4 key购买 nike

在加载主 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>

最佳答案

按钮没有现成的处理程序...您需要使用事件委托(delegate)

使用事件委托(delegate)注册#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')
});
});
})

关于jquery - 加载外部 HTML 并为 HTML 中声明的元素添加事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20392869/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com