CODEWITHSUNDEEP
jquery
antonioh
antonioh

Reputation: 2944

jquery unbind click

I'm going nuts just trying to unbind an onclick handler from the event in jQuery so I can bind it later on to another function.

I have isolated the code in a test page so there's nothing but the meat, just a button that calls a function and a script that tries to unbind it:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript">
    </script>

    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript">
    </script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function() { $("#btnNext").unbind('click'); });
        function hi() {window.alert("hi");}
    </script>
</head>

<body>

    <input id="btnNext" type="button" value="Next" onclick="hi();" />
</body>
</html>

Anybody knows why the click event keeps calling the hi() function no matter what I said in the document.ready?

Thanks

Upvotes: 12

Views: 29295

Answers (4)

tsveti_iko
tsveti_iko

Reputation: 7972

Let's say you have 

$(elem).on("click", function() { ... });

you don't even need to bind it if you want to unbind it later. To do so can just do: 

$(elem).unbind();

and that will remove the handlers regardless of type. If you want to be more specific, you can always pass an event type like "click".

Upvotes: 0

spthorn
spthorn

Reputation: 19

I couldn't get removeAttr to work, but this does:

$("#btnNext").click(function(){ return false; });

I was wanting to remove the ASP.NET-supplied onclicks (just for SelectedNodeChanged) in my TreeView, so I could handle the event on the client. Of course, my click function included more than "return false".

Upvotes: 0

John Bledsoe
John Bledsoe

Reputation: 17642

Just for the record, you can use the removeAttr jQuery function to remove the initially specified onclick attribute.

$('#btnNext').removeAttr("onclick");

Also, in response to Chad, I agree that it is generally better to do all your binding with jQuery, but I'm in a situation (using ASP.NET MVC) that requires individual links to have some model parameters in their click event handlers. It would be more convoluted IMO to try to wire up these event handlers via jQuery.

Upvotes: 9

Chad Grant
Chad Grant

Reputation: 45382

Because you put it in the html attribute, it stays there. It was not bound with jQuery so jQuery is not tracking it's usage.

$("a").bind('click',hi);
$("a").unbind('click',hi);

http://docs.jquery.com/Events/bind

Upvotes: 21

Related Questions