JavaScript changing the value of onclick with or without jQuery

Question

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    lt html gt       lt head gt           lt script type  text javascript                  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery js  gt  lt  script gt           lt script type  text javascript  gt                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                            lt  script gt       lt  head gt       lt body gt           lt a href  http   www google com   id  anchor  onclick  alert  A    return false   gt Click lt  a gt       lt  body gt   lt  html gt

User · Answer

Note that following gnarf s idea you can also do   var js    alert  B     this id   return false    lt br  gt  var newclick   eval   function     js         lt br  gt     a   get 0  onclick   newclick    That will set the onclick without triggering the event  had the same problem here and it took me some time to find out

User · Answer

Came up with a quick and dirty fix to this  Just used  lt select onchange  this options this selectedIndex  onclick    gt   lt option onclick  alert  hello world     gt  lt  option gt   lt  select gt   Hope this helps

User · Answer

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 · Answer

If you don t want to actually navigate to a new page you can also have your anchor somewhere on the page like this    lt a id  the anchor  href    gt    And then to assign your string of JavaScript to the the onclick of the anchor  put this somewhere else  i e  the header  later in the body  whatever     lt script gt      var js    alert  I am your string of JavaScript         js is your string of script     document getElementById  the anchor   href    javascript     js   lt  script gt    If you have all of this info on the server before sending out the page  then you could also simply place the JavaScript directly in the href attribute of the anchor like so    lt a href  javascript alert  I am your script     alert  So am I      gt Click me lt  a gt

User · Answer

BTW  without JQuery this could also be done  but obviously it s pretty ugly as it only considers IE non-IE   if isie     tmpobject setAttribute  onclick   new Function tmp nextSibling getAttributeNode  onclick   value     else      tmpobject  attr  onclick  tmp nextSibling attributes 0  value     this even supposes index   Anyway  just so that people have an overall idea of what can be done  as I m sure many have stumbled upon this annoyance

User · Answer

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  lt a gt  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 · Answer

just use jQuery bind method  jquery-selector  bind  event    fn     See here for more about events in jQuery

[javascript] JavaScript: changing the value of onclick with or without jQuery

Examples related to javascript

Examples related to jquery

Examples related to onclick

Examples related to attributes