jquery anchor popup

Question

I am trying to take a list of anchors and show the text the anchor references to in a popup. like a pop-up glossary of sorts. I have tried a couple of different techniques but i couldnt get any to work as i am very new to this. this technique worked in firefox, but not in internet explorer. any help on this would be appreciated, or if i should be using a different method to this please let me know.

i have my anchor ids as say, id="first" and then the text it references as id="2first"

$("a").click(function(){
    var toGet = $(this).attr('id');
    var holder =$("#2" + toGet);
    var toShow = $(holder).html();
    loadPopup(toShow);
    return false;
});

your going to need to show more information than this. From what I see there all you are going to do is get the html() which is not necessarily the text of an element with an id="#2first". This isn't a list but rather a click on a single anchor tag — CBRRacer, Sep 21 '11 at 02:45

score 2 · Answer 1 · edited May 23 '17 at 12:19

I'd guess that IE doesn't like id attributes that begin with a number. From the HTML4 specification:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML5 has this to say about the id attribute:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

So HTML5 allows you to use pretty much anything but HTML4 certainly doesn't allow an id of "2first" and that may explain IE's behavior. You may find this question of interest as well.

Try moving the "2" to the end:

$("a").click(function(){
    var toGet  = this.id;
    var holder = $("#" + toGet + '2');
    var toShow = holder.html();
    loadPopup(toShow);
    return false;
});

Demo: http://jsfiddle.net/ambiguous/ZcT9f/3/

thanks for the help, but that is still not working. in ie my function is returning the anchor clicked on instead of the anchor it references. as in click on the word and it returns the word, vs the definition as it does in firefox. perhaps my problem lies elsewhere? — dusty, Sep 21 '11 at 03:10
@dusty: Can you reproduce your problem on http://jsfiddle.net? Just a minimal example. — mu is too short, Sep 21 '11 at 03:22

score 0 · Answer 2 · answered Jan 29 '13 at 14:13

I know that this is old, and hopefully you've found an answer by now, but maybe this will help someone else. If you want to avoid an anchor link being followed when you click on it in jQuery and you want to perform some other action instead you can do the following:

$("a").click(function(e){
    e.preventDefault();
    var toGet  = this.id;
    var holder = $("#" + toGet + '2');
    var toShow = holder.html();
    loadPopup(toShow);
    return false;
});

By adding the event, e, to the function you can now access the event and call e.preventDefault() which will prevent the link from being followed, instead it will execute the code that follows it.

jquery anchor popup

2 Answers2