tags:

views:

2210

answers:

3

Hi all,

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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

+2  A: 

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

Chad Grant
Do you mean anything set in a declarative mode cannot be unbind like this?
antonioh
correct, you maybe be able to unbind it by $("#btnNext").attr('onclick','') ... but better to do all your binding with jQuery. It's much cleaner and less confusing. Easy to forget about the javascript you added in your attributes. ;)
Chad Grant
Nice one, now I understand why it didn't work. I'll do the binding as you say. Thanks!
antonioh
np ;) also noticed you have jQuery added twice, ya just need the .min version.
Chad Grant
+4  A: 

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.

John Bledsoe
A: 

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".

spthorn