Prevent onclick execution with jquery

Question

UPDATED

Html Code:

<input type="textbox" id="textbox" value="">
<input type="button" id="btn" value="Validate" onclick="document.write('VALIDATION PASSED')" />

JS Code:

$(document).ready(function() {
    $("#btn").click(function() {
        if ($("#textbox").val().length == 0) {
            alert("Validation error");        
            return false;
        }
    }).prop("onclick", null );
})

I have updated my code. So the issue is that after first click my onclick event stopped working. How I could fix it?

P.S. Please DO NOT change html code. I have some reasons to ask about it, but please could you please do it only with javascript? I realize that probably this is not the most easy way but I have some technical limitations in my application.

Thanks!

JSFiddle http://jsfiddle.net/B5GWx/12/

Esailija · Accepted Answer · 2012-11-23 16:18:51Z

7

$(document).ready(function() {
    $("#btn").click(function() {
        alert("Want to show only this message");        
        return false;
    }).prop("onclick", null );
})

http://jsfiddle.net/B5GWx/5/

answered Nov 23, 2012 at 16:18

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

1 Comment

Vytalyi Over a year ago

Yeah, sorry, my mistake. Your solution really helped me. Thanks.

T.J. Crowder · Accepted Answer · 2012-11-23 16:20:58Z

2

You can't reliably, cross-browser, use a DOM2 handler to prevent a DOM0 handler from running.

What you can do, though, is remove the DOM0 handler entirely:

$(document).ready(function() {
    var btn = $("#btn");
    btn.click(function() {
        alert("Want to show only this message");        
        return false;
    });
    btn[0].onclick = null;   // <==== Here
});

answered Nov 23, 2012 at 16:20

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Comments

Gurpreet Singh · Accepted Answer · 2012-11-23 16:30:21Z

1

Just removing the DOM handler will do the job. No need to return false; or e.preventDefault();

$(document).ready(function() {
    $("#btn").click(function(e) {
        alert("Want to show only this message");        
    }).prop("onclick", null );
})

DEMO

answered Nov 23, 2012 at 16:30

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

2 Comments

T.J. Crowder Over a year ago

There were two previous answers saying this when you posted this answer (each slightly different, posted almost simultaneously). Surely in the more than 10 minutes since those were posted, you could see this was just a duplicate answer. Having lots of duplicate answers just increases clutter.

Gurpreet Singh Over a year ago

Agree but all of the answers are including return false; or e.preventDefault(). I wanted to highlight this point.

ilivewithian · Accepted Answer · 2012-11-23 16:18:31Z

-3

You are looking for preventDefault

Description: If this method is called, the default action of the event will not be triggered.

$(document).ready(function() {
    $("#btn").click(function(e) {
        alert("Want to show only this message");        
        e.preventDefault();
    })
})

answered Nov 23, 2012 at 16:18

ilivewithian

19.8k22 gold badges110 silver badges168 bronze badges

3 Comments

Esailija Over a year ago

wrong on 3 counts: the onclick directly on the element executes before the jQuery handler, returning false from a jQuery handler already prevents default and prevent default doesn't stop other handlers from executing in the first place

jfriend00 Over a year ago

Returning false from a jquery click handler already does prevent default for you.

T.J. Crowder Over a year ago

DOM0 handlers (onxyz) are executed before DOM2 handlers on some engines. And preventing the default action doesn't necessarily prevent them on others. Stopping propagation might, on some. But what you really need to do is remove the DOM0 handler.

Collectives™ on Stack Overflow

Prevent onclick execution with jquery

4 Answers 4

1 Comment

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related