6

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?

Improve this question

5 Answers 5

Reset to default
3

$("#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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You are the only one that actually answered OP's question, good on you
2

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/

Improve this answer

4 Comments

Thanks Rocket, but see my response to Pointy above. I wish I could bind directly, but the links don't exist yet to bind to, I'm creating them in the JQuery as raw html, then injecting them into the DOM once the HTML is composed.
You've sold me, I thought since I was there to do it my way, but live() might be better, thanks for the feedback!
Hmm, this won't work since the link location is unique for each link. That OID in the function is unique for each link, meaning each link has a unique Javascript parameter. If it was one link that would work, but there can potentially be 10 unique links I would have to loop through
@Mark: When each link is being created, just make sure it has the right event assigned to it.
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.

Improve this answer

7 Comments

Thanks Pointy, but the bind() isn't really helpful since I'm actually creating the new objects in raw HTML at the time (I'm looping through the links and creating a new list of <a>s). Basically, the stuff I'm supposed to bind to doesn't exist yet.
@Mark Kadlec well you can create the elements and add them to the DOM and then bind event handlers, or you can use ".live()" or ".delegate()" to handle the events at some container element.
Hmm, you got me thinking now, that might work too. I just thought since I was right in the spot to create the link it would be easier to do it there. Live() might be the better approach, thanks!
See my response to Rocket, I can't really use Live() since the function is not statically defined, the OID value in the call is unique for each link.
@Mark Kadlec well then you can build a table that maps some identifier (like an "id" or "class" value) from the event targets onto the correct event handler function. Your handler can use that to delegate event handling appropriately.
|
1

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.

Improve this answer

Comments

0

try this;

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

Revised as per comment:

$('#theLink').get().getAttributeNode('onclick').value
Improve this answer

3 Comments

This does not work. Object [object Object] has no method 'getAttributeNode'
@Rocket, sorry. I forgot that getAttributeNode is performed on the DOM element and not the jquery selector. I've updated the answer with a revised version, please retry.
The above didn't work, but $(this)[0].getAttributeNode('onclick').value did

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.