Suppress click event using JQuery

Question

I have an html button that is being rendered as HTML like such:

<input type="button" value="Select" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvAttendants','Select$0')" />

I'm attempting to use JQuery to suppress the click event of the above input tag, but I can't figure out how to do it! The button still does a postback, and I don't want it to.

Here's my JQuery code:

$("input[type='button'][value='Select']").click(function($e) {
            $e.preventDefault();
        });

Any suggestions?

Answer 1

Try adding return false in your click handler.

Answer 2

You can't remove the onclick handler like that. All you're doing is attaching yet another click handler. Try this:

$("input[type='button'][value='Select']").removeAttr('onclick');

Also make sure your code is wrapped around document.ready

Answer 3

My guess is the button is being rendered by a ASP.NET control. In that case, I'd remove the onClick attribute. This may still cause a postback:

$("input[type='button'][value='Select']").removeAttr("onclick");

Alternatively, you can disable the button:

$("input[type='button'][value='Select']").attr("disabled","disabled");

Answer 4

I think you could also do an unbind method:

$("input[type='button'][value='Select']").unbind("click");

//to check
$("input[type='button'][value='Select']").bind("click", function(){alert("it runs only");});