JavaScript: changing the value of onclick with or without jQuery

Alessandro_Vernet_5295 0
Viewed 165230

I'd like to change the value of the onclick attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick attribute in HTML.) Here are a few things I tried:

  • Using jQuery attr("onclick", js) doesn't work with both Firefox and IE6/7.
  • Using setAttribute("onclick", js) works with Firefox and IE8, but not IE6/7.
  • Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return is code passed to eval().

Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.

<html>
    <head>
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var js = "alert('B'); return false;";
                // Set with JQuery: doesn't work
                $("a").attr("onclick", js);
                // Set with setAttribute(): at least works with Firefox
                //document.getElementById("anchor").setAttribute("onclick", js);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com/" id="anchor" onclick="alert('A'); return false;">Click</a>
    </body>
</html>
onclick attributes jquery javascript
7 Answers

You shouldn't be using onClick any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See .click()

$(document).ready(function(){
    var js = "alert('B:' + this.id); return false;";
    // create a function from the "js" string
    var newclick = new Function(js);

    // clears onclick then sets click using jQuery
    $("#anchor").attr('onclick', '').click(newclick);
});

That should cancel the onClick function - and keep your "javascript from a string" as well.

The best thing to do would be to remove the onclick="" from the <a> element in the HTML code and switch to using the Unobtrusive method of binding an event to click.

You also said:

Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return in code passed to eval().

No - it won't, but onclick = eval("(function(){"+js+"})"); will wrap the 'js' variable in a function enclosure. onclick = new Function(js); works as well and is a little cleaner to read. (note the capital F) -- see documentation on Function() constructors

user_919140

One gotcha with Jquery is that the click function do not acknowledge the hand coded onclick from the html.

So, you pretty much have to choose. Set up all your handlers in the init function or all of them in html.

The click event in JQuery is the click function $("myelt").click (function ....).

user_1009640
user_1018070
Related