Question

I have a script that’s supposed to dynamically place divs containing group member names inside one container div. These divs are ID’d by the concatenation of “groupMemberEntryDiv” and the group member’s e-mail address (which is unique in my system).

The problem is that using the IDs in jQuery selectors doesn’t work. I believe I’ve covered all the possible hangups that could be causing this problem:

1. The presence of ‘@’ in e-mail addresses (element IDs cannot contain this character). I’ve fixed this by replacing them with ‘:’, which is allowed character. Also, since ‘:’ does not appear in valid e-mail addresses, I can use indexOf to parse the string and replace it with ‘@’ when I need to use the e-mail address again.
2. The presence of ‘:’ and ‘.’ in (the now modified) e-mail addresses (jQuery may see them as pseudo-classes and classes respectively). Following the instructions in that page, I have tried to escape the characters. In fact, I lifted the .replace() function from that very link to do so.

Unfortunately, the selectors still won’t work. I’ve created a simple jFiddle to illustrate the problem.

Can someone please explain what’s going on?

Answer 1

This is because you are escaping the special characters (which is correct for the selector) but the ID doesn’t need to be escaped. Consider:

$("#protectedGroupDiv100").append("<div id='groupMemberEntryDiv"  + emailString + "' class='groupMemberEntryDivs'>hey</div>");

Generates:

<div id="groupMemberEntryDivblahblah\:gmail\.com" class="groupMemberEntryDivs"></div>

See how this creates an element with id of: #groupMemberEntryDivblahblah\:gmail\.com
but later you use the selector of #groupMemberEntryDivblahblah\:gmail\.com which seems the same but what jQuery looks for is actually #groupMemberEntryDivblahblah:gmail.com. Since the ID of your element has backslashes in it, jQuery finds no match for the selector.

To fix this set the ID before you escape it:

$.each(emailArray, function(index, emailString){
    emailString = emailString.replace("@", ":");            //Element attributes cannot contain "@"

    $("#protectedGroupDiv100").append("<div id='groupMemberEntryDiv"  + emailString + "' class='groupMemberEntryDivs'>hey</div>");

    emailString = emailString.replace(/(:|\.)/g,'\\$1');    //Escape ':' and '.'

   alert($("#groupMemberEntryDiv"  + emailString).length);                  
});

Here is a modified jsFiddle.

Though this works, I do not recomend having user emails in the markup. As others have hinted to it can lead to security issues.