CODEWITHSUNDEEP
javascriptjqueryhtml
Lewis Irving
Lewis Irving

Reputation: 11

JQuery click function not working first time - requires 2 clicks before it functions properly

This is my first question on Stack Overflow so i hope i get a good response!

Basically, i am currently learning the ropes in Javascript and I've just began learning JQuery, I decided to add some JQuery code to make the surrounding div box around a cancel button disappear after clicking. I've managed to successfully/ish do this, however its not responsive first time round upon clicking.

After googling it, i think its because the code first time round only activates the click event to be used. I've spent a fair few hours fiddling and trying to find the right amendment however no luck so far.

Hopefully somebody can help!

Javascript to create the cancel button:

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 to action the cancel button

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

Upvotes: 1

Views: 1620

Answers (2)

Elleunamme
Elleunamme

Reputation: 21

Well this is my first answer, so I hope I will be able to help!

Your code behaves like this : the first click on the cancel button calls cancelactivetrade() which calls a confirm popup. If you click ok in the popup, you then set up a second click event listener. But you have to click a second time to trigger the new click event listener that removes your div.

I would suggest something like this instead : 

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

And you also remove the first event listener cancel.setAttribute("onclick","cancelactivetrade()") from your javascript since the .on() takes care of the event listener on its own.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337714

The problem is because you have nested your click event handlers. The first one runs cancelactivetrade() and assigns the on('click') handler. The second on runs cancelactivetrade() again and assigns another click handler, and then runs the on() logic from the previous click.

To fix this you can bind the on() event handler directly to the element, so you can use the this reference. As you're already using jQuery you can use that to simplify the element creation and appending to the 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();
  };
});

Alternatively you can use a single delegated event handler for all the .activetradecancel buttons you create:

// 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)

Upvotes: 1

Related Questions