ansaurus

Question

Answer 1

+4 A:

You can escape single or double quotes in a string with a backslash.

'... href="javascript:openChat(\'http...\')">...'

Joel Potter 2010-04-13 15:54:20

Answer 2

+2 A:

You just have to escape the apostrophes in the string using \':

$(".messages-wrapper")
.append('<li class="chat-wrapper"><a class="chat" href="javascript:openChat(\'http://domain.com/Messenger.aspx\'"&gt;Chat öffnen<span></span><small>Chat öffnen</small></a></li>');

Guffa 2010-04-13 15:56:31

Answer 3

+2 A:

You're probably having problems because of the quotes in the string. The single quotes are terminating the string early and causing a javascript error.

Consider, however, applying the hander at the same time that you append the html.

 var link = $('<li class="chat-wrapper"><a class="chat" href="http://domain.com/Messenger.aspx"&gt;Chat öffnen<span></span><small>Chat öffnen</small></a></li>')
            .find('a')
            .click( function() {
                 openChat($(this).attr('href'));
                 return false;
            });
 link.appendTo(".messages-wrapper");

tvanfosson 2010-04-13 15:58:49

+1, will degrade gracefully if javascript is not enabled, though I'm guessing the chat page needs JS anyway.

Joel Potter 2010-04-13 20:41:17

@Joel: A bit moot to consider how code created with Javascript would behave if Javascript was not enabled...

Guffa 2010-04-14 06:03:29

@tvanfosson: You are missing the point completely. If Javascript isn't enabled, the code that creates the link doesn't execute.

Guffa 2010-04-14 13:16:39

@Guffa, you are correct. However, I still discourage embedding javascript in markup, even javascript generated markup.

Joel Potter 2010-04-14 13:32:37

@Guffa - you're right, of course, you caught me before my morning coffee and I responded without re-reading my answer. In my case what I usually do is simply put the HTML inline and add handlers later so I assumed that's how I had answered. If the chat page does require javascript, though, this would be a *better* way to add the HTML as it then wouldn't exist unless javascript were enabled.

tvanfosson 2010-04-14 13:34:15

Answer 4

+1 A:

Just use a nested append off of a created opject, to do the click action.

$('.messages-wrapper')
  .append(
    $('<li class="chat-wrapper" />")
      .append(
        $('<a class="chat" href="http://domain.com/Messenger.aspx"&gt;&lt;small&gt;Chat öffnen</small></a>')
          .click(function(){
            openChat(this.href);
            return false;
          })
      )
  );

This is easier to read the intention anyway, imho.

Tracker1 2010-04-14 00:45:55

+1 for being very jQueryie

TehOne 2010-04-14 01:01:40

ansaurus

tags:

views:

answers:

jQuery append HTML with javascript link

related questions