1

Let me preface this question by saying there may be a completely different solution than my title so let me tell you what I am after entirely.

Basically I have a series of menu links. The href in all the links are storing jQuery functions, not URL's (to control turn.js book script). So one of the href's may look like so:

<li id="menu-item-68" class="home menu-item menu-item-type-custom menu-item-object-custom menu-item-68">
  <a href="$('#primary').turn(‘page’,1);"></a>
</li>

The request is simple...on click() of a menu item i need to execute the contents of the href. My first thought was to run through each link and store a temp string of the href and then use eval() but that looks to be a bad option from what I read.

So, how can I execute the contents of my href quickly and safely?

Improve this question
4
  • Could you post the code you have. Commented Mar 13, 2012 at 12:38
  • Well it depends. Is the content of href coming from you or is it user provided? Because if you have control over the content, eval might not be a bad choice. Commented Mar 13, 2012 at 12:39
  • Let me preface this question by saying there may be a completely different solution than my title so let me tell you what I am after entirely. Then it's a poor title. It also does not need tags in it. Commented Mar 13, 2012 at 12:40
  • I added a link that Wordpress generates. Note that Wordpress adds 'http://' before everything so using jQuery I have purposely eliminated that from every href. Commented Mar 13, 2012 at 12:43

4 Answers 4

Reset to default
2

There are a few solutions here. You might want to look into using something like Backbone which provides something called routers that would aid you in navigation.

Or to hack up something similar, set each of your href tags to point to a new # anchor:

<a href="#2">next page</a>

and then attach a listener to the hashchange event. When the event fires, the user has clicked on the link. Then access the hash window.location.hash and use that as the argument to a function which does what you need it to do.

$(window).on('hashchange', function(event){
    $('#primary').turn('page', window.location.hash.slice(1));
}

The slice is there since window.location.hash includes the # character.

EDIT

I notice you updated saying you use wordpress and you're editing out the http:// part of your URLs. If you're using the hashchange event you don't need to since href="#2" is the same as href="http://mysite.post.com/this_post/#2"

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

3 Comments

I should mention that hashchange has some browser support caveats, so you might have to do something to handle that. If you Google it, you'll see what I mean. Also, if you're unconcerned with later browsers, you can always look into the history navigation API...
This doesn't appear to be doing anything in Firefox.
Unfortunately I couldn't keep trying this method because I had to hack apart the menu anyway and do something different. The below solution worked in my new scenario. Thank you for the help though, never knew about the hashchange() function, looks pretty neat.
1

How about use the onclick event?

<a onclick="function(){$('#primary').turn('page', 2); return false;}" href="#">Click me!</a>

Alternately, since you're using JQuery, you could .bind() the event:

<script>
    $('a.clickable').bind('click', function(e){
         var pageNum = $(this).attr('data-page');
         $(#primary).turn('page', pageNum);
         return false;
    });
</script>
<body>
   <a class='clickable' data-page='2' href='#'>Click me!</a>

Alternately, since you only have access to the href attribute, you COULD do this, which is the easy way out:

 <a href="javascript:$('#primary').turn('page', 2)">Click me!</a>
Improve this answer

3 Comments

This looks great, except I can't add attributes to my link since it's Wordpress doing the work. I mean - I COULD but I don't want to hack about the core.
And of course trying that (which yes I thought of :) ) Wordpress does not like and completely removes it before saving the link! So, I will probably be using this method anyway since I found another big unrelated flaw in the menu. I need to create a somewhat static menu now and this should do it, I'll let you know shortly.
This works great! I edited your .bind() example though, since the href is a hash and you added a custom attribute the code technically doesn't work.
0

Can't you simply simulate a click event on the links in that case? In other words, if you already have jquery loaded $("a#identifier").click(). In your current scenario that seems to be the easiest way.

Improve this answer

1 Comment

If you trigger the link by jQuery, the code inside href attribute will not be executed.
0

I've a similar issue and solved it like this:

In your script, define a function like:

$.fn.DoSomething=function (MyOption){ window.alert(MyOption); };

And in your link href call the function like javascript:$.fn.DoSomething('Hello');

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.