JavaScript OnClick Handler Not Invoking

Question

I'm calling a javascript function in an inline onclick like so:

<a href="#" onclick="removeAttribute('foo', 'bar');">Some Link</a>

When I click on the link, though, nothing happens. I have other links (to other functions) tied to onclicks that work fine elsewhere on the same page. All links to this "removeAttribute" function fail.

There are no errors in Firebug, and the onclick event handler is being invoked - but stepping into the removeAttribute function ends up, for some reason, somewhere in jQuery.js. At no point does removeAttribute ever get called.

If I do:

javascript:removeAttribute('foo', 'bar');

in Firefox's address bar. The function is called successfully.

Anyone seen this?

Answer 1

Try this:

<a href="javascript:removeAttribute('foo', 'bar');">Some Link</a>

It probably isn't working because of the '#' for the href value. So instead put the javascript as the href, which effectively is the same thing as putting it in the address bar.

Answer 2

Are you calling your own method? If so it is confusing to call it removeAttribute because it is already defined as method attached to DOM nodes. When your event handler is called its scope is defined as the Node that was clicked. Your code is probably calling the builtin method on the object the was clicked. Try using a different name or putting your method inside of a Javascript object so you can call it explicitly.

Answer 3

If you're using jQuery, why not leverage it? Assuming your version of removeAttribute() does the same thing as the native javascript method removeAttribute(), you could do something like:

<script type='text/javascript'>
    $(document).ready(function(){
        $('a#somelink').click(function(){
            $('#foo').removeAttr('bar');
        });
    });
</script>