jquery event handlers stacking

Question

i have something like this: http://jsfiddle.net/PTcw8/4/

<div id="container">
    <a href="#" onclick="javascript:alert('inline'); return false;"> show me </a>
    <br />
    <input type="button" value="click to change the links onclick event" onclick="javascript:changeOnClick(); return false;" />
</div>​

function changeOnClick() {
    $("#container a").unbind('click');
    $("#container a").on('click', function() {
        alert("changed on the fly");
    })
}​

the link has an inline onclick event, i cant unbind it and bind a new handler, they just stack for some reason.

isn't it possible to unbind inline handlers?

Answer 1

You can only .unbind() an event handler if you have previously attached it with .bind():

Event handlers attached with .bind() can be removed with .unbind().

For inline event handlers, either use:

$("#container a").removeAttr("onclick");

or

$("#container a")[0].onclick = null;

DEMO.

Answer 2

I would do this:

$(document).ready(
    function(){
       $("#container a").removeAttr("onclick");
       $("#container a").on('click', function() {
          alert("changed on the fly");
       })
    }
);