Using JQuery to get string value of an onclick() event

Question

Wondered if there was good way to do this, thought I would post to the SO community...

There is a 3rd party web page that I have no control over how it renders, but they allow me to add JQuery.

Using the JQuery, I am creating a nav menu on the side of the page, it 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 a:

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

linkLoc returns:

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

instead of what I would expect:

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

I think JQuery is trying to get the event for binding, but I need the actual Javascript markup since I'm creating the HTML dynamically. I guess I could substring the "function onclick(event) {" out, but seems kind of hacky.

Any ideas of an elegant way I could get the onclick markup?

Answer 1

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

Answer 2

The "onfoo" attributes have values that are functions , not strings. The semantics of:

<whatever onclick='code code code'>

are that the browser constructs a function object as if you had code that did this:

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

Thus you don't really need the raw string, since you've got something better: the function itself, ready to be called. You can then bind it as a handler to other elements via JavaScript code, not HTML (which is really a better way to do things anyway). You're using jQuery, you say, so you can use the jQuery ".bind()" API to bind those functions to whatever elements you need.

You should also be aware that there are other ways of binding event handlers to elements, ways that will leave the "onfoo" attributes completely unset.

Answer 3

The type of $('#theLink').attr("onclick") is a function, so you can just use that when you bind events to the 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 too, if you need:

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

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

Answer 4

If I understand where you're going with this, you should be able to assign the returned onclick function straight through 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 just bind another click handler.

Answer 5

try this;

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

Revised as per comment:

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