Using jQuery to get the string value of the onclick () event

Question

I wonder if there was a good way to do this, thought that I would send a message to the SO community ...

There is a third-party web page in which I have no control over how it is displayed, but they allow me to add jQuery.

Using jQuery, I create a navigation menu on the side of the page, this will be a list of links. The onclick event of these links I get from existing onclick events already on the page, but when I do:

var linkLoc = $('#theLink').attr("onclick"); 

linkLoc returns:

 function onclick(event) { handleJumpTo("com.webridge.entity.Entity[OID[E471CB74A9857542804C7AC56B1F41FB]]", "smartform"); } 

instead of what i expect:

 handleJumpTo("com.webridge.entity.Entity[OID[E471CB74A9857542804C7AC56B1F41FB]]", smartform"); 

I think JQuery is trying to get an event to bind, but I need the actual Javascript markup, as I am creating HTML dynamically. I guess I could fine-tune the onclick (event) {"out function, but it seems to be hacky.

Any ideas on an elegant way to get onclick markup?

Answer 1

Type $('#theLink').attr("onclick") is a function, so you can just use this when binding events to links.

 var linkLoc = $('#theLink').attr("onclick"); $('a#link1').live('click', linkLoc); 

Example: http://jsfiddle.net/BdU6f/

You can also run other code in the click handler if you need to:

 var linkLoc = $('#theLink').attr("onclick"); $('a#link1').live('click', function(e){ // Code... linkLoc(e); }); 

Example: http://jsfiddle.net/BdU6f/1/

Answer 2

$("#theLink") will return a jQuery object, while $("#theLink")[0] will give a DOM object. This is resson that $("#thelink")[0].getAttributeNode('onclick').value will work.

Answer 3

The onfoo attributes have function values, not strings. Semantics:

 <whatever onclick='code code code'> 

is that the browser creates the function object as if you had the code that did this:

 document.getElementById('whatever').onclick = new Function("event", "code code code"); 

This way, you don't need a raw string, since you have something better: the function itself, ready to be called. You can then attach it as a handler to other elements using JavaScript code, not HTML (this is really the best way to do something anyway). You are using jQuery as you say, so you can use the jQuery ".bind ()" API to associate these functions with any elements you need.

You should also know that there are other ways to bind event handlers to elements, methods that do not fully take into account the "onfoo" attributes.

Answer 4

If I understand where you are going with this, you should be able to assign the return onclick function directly to the onclick of your new nav element ...

 $('#NewNavElement').click($('#theLink').attr('onclick')); 

If you need to add additional code to the handler, you can simply bind another click handler.

Answer 5

try it;

 $('#theLink').getAttributeNode('onclick').value 

Revised as a comment:

 $('#theLink').get().getAttributeNode('onclick').value