时间戳

首页 > 解决方案 > JQuery点击功能第一次不工作 - 需要2次点击才能正常工作

javascript - JQuery点击功能第一次不工作 - 需要2次点击才能正常工作

问题描述

这是我在 Stack Overflow 上的第一个问题，所以我希望我能得到一个好的答复！

基本上，我目前正在学习 Javascript 中的绳索，并且我刚刚开始学习 JQuery，我决定添加一些 JQuery 代码以使取消按钮周围的 div 框在单击后消失。我已经成功/成功地做到了这一点，但是它在第一次点击时没有响应。

谷歌搜索后，我认为这是因为代码第一次只激活了要使用的点击事件。我花了几个小时摆弄并试图找到正确的修正案，但到目前为止还没有运气。

希望有人可以提供帮助！

创建取消按钮的 Javascript：

var cancel = document.createElement("button");
var canceltext = document.createTextNode("Cancel")
activetradediv.appendChild(cancel);
cancel.appendChild(canceltext);
cancel.setAttribute("class","activetradecancel")
cancel.setAttribute("onclick","cancelactivetrade()")

JQuery 操作取消按钮

function cancelactivetrade (){
    if (window.confirm("Are you sure you want to cancel this trade? \nClick 'Okay' to confirm"))
    {$('.activetradecancel').on('click', function() {
    $(this).parent('.activetradediv').remove();
  });};}

标签： javascriptjqueryhtml

解决方案

好吧，这是我的第一个答案，所以我希望我能提供帮助！

您的代码行为如下：第一次单击取消按钮调用cancelactivetrade()调用确认弹出窗口。如果在弹出窗口中单击“确定”，则设置第二个单击事件侦听器。但是您必须再次单击才能触发删除 div 的新单击事件侦听器。

我会建议这样的东西：

$('.activetradecancel').on('click', function() {
  if (window.confirm("Are you sure you want to cancel this trade? \nClick 'Okay' to confirm"))
  {
    $(this).parent('.activetradediv').remove();
  }
});

而且您还cancel.setAttribute("onclick","cancelactivetrade()")从您的 javascript 中删除了第一个事件侦听器，因为.on()会自行处理事件侦听器。

推荐阅读