Tutorial :getting the contents of a function in an `onclick` attribute in my html with jQuery



Question:

What?! I know, what a bad idea.

Firstly I have no control over the html that was output, its from a vendor and it is produced via their crazy system that our company has an agreement with. (let's not talk about the situation, I know it's not optimal)

In the html I have:

<a id="notify" onclick="location.href='index.php?foo=bar';return false;" href="javascript:;">Notify!</a>  

In my JS If I do:

console.log($("#notify").attr("onclick"))  

I recive:

onclick(event)  

Which makes sense, but I need to change the onclick's attribute, so it reads to something like:

onclick="location.href='index.php?foo=bar&zoobazz=moo';return false;"  

better yet, if I could remove the onclick and replace the href attributes value with location.href.


Solution:1

This will give you the function in a string

$("#notify").attr("onclick").toString()  

Grep the URL after that


Solution:2

If I understand your question correctly, you want to actually see what the onclick event is doing and append to it, not just replace it. I tried this in chrome and it works, but it's pretty much a hack. Basically, when you get a reference to the "click" or "onclick" event function (using either jQuery or pure JS), then you can to a ".toString()" on it to convert the function into a string. Then you just strip off the "function" definition using some trickery and you're left with what you need - "location.href='.......".

Then just append your additional parameters. Hopefully this leads you in the right direction.

<html>   <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/javascript">  $(function(){      var $target = $("#notify");      var funcBody = $target.attr("onclick").toString().split("\n")[1].split(";")[0];      $target.attr("onclick","").attr("href", funcBody);  });  </script>  </head>  <body>  <a id="notify" onclick="location.href='index.php?foo=bar';return false;" href="javascript:;">Notify!</a>  </body>  </html>  


Solution:3

document.getElementById('notify').onclick = function() {location.href='index.php?foo=bar&zoobazz=moo';return false;};  


Solution:4

Does

$("#notify").click(function() { $("#notify").attr("onclick", "location.href='index.php?foo=bar&zoobazz=moo';"); return false;})   

not do what you need it to do?


Solution:5

You can set onclick by using $("#foo").click = ''; You can change href by changing the attribute, using .attr(key, value); http://docs.jquery.com/Attributes, and http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax

so

$('#foo').click = '';  $('#foo').attr('href', 'whateveryousetitto');  


Solution:6

I may be reading too much into the question, but I think OP is asking how to get the event code so that it can be manipulated, not just replaced. When specifying "index.php?foo=bar", I don't think the value of bar is known. If this was a known value, then why read the onclick value at all?


Solution:7

alert($('#notify').click);  

?


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »