jQuery preventDefault onclick function

Question

I have this simple jQuery script that asks to confirm action when you click on a link. And it works great when it's a normal a href link, but I have onclick script assigned to the button and it does not prevent it from firing. I need it to prevent it only once. How can I achieve that?

$(".mybutton").one('click', function() {
    event.preventDefault();
    $(this).html("Are you sure?");   
});

function test() {
  $(".forthebutton").html("button click function worked");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="mybutton" onclick="test();">Button</button>

<br /><br /><br />

<span class="forthebutton">button click should change this text</span>

On clicking the button, you are intending to change both the text in the span with class "forthebutton" and also ask confirmation? Is this understanding correct? — Prasath Rajasekaran
– Prasath Rajasekaran, Commented May 30, 2020 at 17:01

vadimk7 · Accepted Answer · 2020-05-30 17:41:44Z

1

You need to remove original onclick and give it back in this case because you can't influent on onclick handler.

const btn = $(".mybutton");
const onclick = btn.prop('onclick'); // save onclick fn

btn.prop('onclick', null); // remove onclick from button
btn.one('click', function() {
    $(this).html("Are you sure?");
    btn.on('click', onclick); // add onclick back to button
});

function test() {
  $(".forthebutton").html("button click function worked");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="mybutton" onclick="test();">Button</button>

<br /><br /><br />

<span class="forthebutton">button click should change this text</span>

answered May 30, 2020 at 17:41

vadimk7

8,4071 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery preventDefault onclick function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related