$(":input").on("change", function(e) {
console.log("change triggered");
$("#section").html("<button id='order'>Order</button>");
registerButtons();
});
function registerButtons() {
$("#order").on("click", function(e) {
console.log("click triggered");
alert("Hello World");
});
$("#order").on("mousedown mouseup", function(e) {
console.log(e.type + " triggered");
});
}
registerButtons();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="123"/>
<div id="section">
<button id="order">Order</button>
</div>
我有一个带有按钮和一些输入字段的网页。
- 在按钮上注册了一个点击事件
- 在输入字段上注册更改事件
onChange 将触发 AJAX 服务器调用,结果将替换网页的部分内容 - 包括按钮。 AJAX结果处理完毕后,所有监听器都会重新注册。
现在问题来了。用户更改输入字段的值,然后直接单击按钮 - 但速度较慢(假设用户单击需要 500 毫秒),因此会触发 onChange 事件,并且页面会“更新”/替换”。现在,“旧”按钮触发 onMouseDown 事件,"new"按钮触发 onMouseUp 事件 - 但没有 onClick 事件。
我当前的解决方法是,注册两个 mouseDown/mouseUp 事件,获取鼠标按下的时间戳,如果鼠标弹起在 2 秒内出现,则执行以下操作onClick 应该做什么。 无法从 AJAX 响应中删除按钮部分 - 在最坏的情况下,按钮可能会被删除并被用户信息替换。
我的希望是,有更好的解决方案......有什么想法吗?
最佳答案
您可以利用事件委托(delegate)并在容器而不是按钮上设置监听器。
您正在向旧按钮添加一个点击监听器,并向 dom 添加一个新按钮。所以点击不起作用。
该按钮不起作用,因为由于某种原因,当您将鼠标悬停在其上时它无法聚焦。所以我添加了一个 getFocus 方法,现在它应该可以工作了。
$("input").on("change", function(e) {
console.log("change triggered");
$("#section").html("<button id='order'>Order</button>");
});
function registerButtons() {
$('#section').on("mouseup", '#order', function(e) {
alert('Clicked!');
});
}
registerButtons();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="123"/>
<div id="section">
<button id="order">Order</button>
</div>
我刚刚发现 jQuery 提供了一个很棒的 API,可以用于事件委托(delegate)。这样我们就不必手动检查事件目标。看看http://api.jquery.com/on/
$("input").on("change", function(e) {
console.log("change triggered");
$("#section").html("<button id='order'>Order</button>");
});
function registerButtons() {
$("#section").on("click", '#order', function(e) {
console.log("click triggered");
alert("Hello World");
});
$("#section").on('mouseover','#order', function(e){
$(this).focus();
});
}
registerButtons();
关于javascript - AJAX 刷新期间丢失 "click"事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38358753/