JQuery функция нажатия не работает в первый раз - требуется 2 щелчка, прежде чем она функционирует должным образом

Question

Это мой первый вопрос о переполнении стека, поэтому я надеюсь, что получу хороший ответ!

По сути, я сейчас изучаю веревки в Javascript, и я только начал изучать JQuery, я решил добавить код JQuery, чтобы окружение div вокруг кнопки отмены исчезло после нажатия. Мне удалось / i sh сделать это, однако он не реагирует на первый раз при нажатии.

После поиска в Google, я думаю, это потому, что код в первый раз активирует только событие click, которое будет использоваться. Я потратил немало часов, пытаясь найти правильную поправку, но пока не повезло.

Надеюсь, кто-нибудь может помочь!

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();
  });};}

Answer 1

Ну, это мой первый ответ, так что я надеюсь, что смогу помочь!

Ваш код ведет себя так: первый щелчок по кнопке отмены вызывает 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 () позаботится о слушателе событий самостоятельно.

Answer 2

Проблема в том, что вы вложили свои обработчики событий щелчка. Первый запускает cancelactivetrade() и назначает обработчик on('click'). Второе включение снова запускает cancelactivetrade() и назначает другой обработчик щелчков, а затем запускает on() logi c из предыдущего щелчка.

Чтобы исправить это, вы можете привязать обработчик событий on() непосредственно к элемент, так что вы можете использовать ссылку this. Поскольку вы уже используете jQuery, вы можете использовать это для упрощения создания элемента и добавления его в DOM:

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

В качестве альтернативы вы можете использовать один делегированный обработчик событий для всех кнопок .activetradecancel, которые вы создать:

// call this ONCE when the page loads:
$(document).on('click', '.activetradecancel', function() {
  if (window.confirm("Are you sure you want to cancel this trade? \nClick 'Okay' to confirm")) {
    $(this).parent('.activetradediv').remove();
  };
});

// execute this statement every time you want to create a new button:
$('<button class="activetradecancel">Cancel</button').appendTo(cancel)