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

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/