2

Possible Duplicate:
Create a link with javascript within it

I am trying to put a function into HTML tag which I am generating by javascript.

What I've got:

<script type="text/javascript">
    var html = '';
    html += '<div><a href="#" onclick="showBlock("#idTextBlocks");">Show Text Blocks</a></div>';
</script>

The showBlock("#idTextBlocks"); is the JQuery function which takes the ID of the component which needs to be show once the link is clicked.

function showBlock(id) {
    $(id).show('slow');
}

The problem is that it is not working. It gets generated into:

<a #idtextblocks");"="" onclick="showBlock(" href="#">Show Text Blocks</a>

I've tried to change the quotes into ' singe: onclick="showBlock('#idTextBlocks'); but this just breaks all my javascript.

So the question is how to correctly pass a function into HTML <a> tag's onclick attribute if the tag itself is generated with javascript?

Improve this question
1
  • 2
    Since you're using jQuery you shouldn't be creating your HTML that way in the first place, nor attaching your event handlers. Commented Nov 23, 2012 at 16:10

5 Answers 5

Reset to default
1

Use &quot; for this:

I have come across the same issue and have fixed it by replacing " with &quot;, which is safer than using \".

<script type="text/javascript">
    var html = '';
    html += '<div><a href="#" onclick="showBlock(&quot;#idTextBlocks&quot;);">Show Text Blocks</a></div>';
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I am waiting until I can :) Why I have to wait? It doesn't allow me to accept the answer. Still 1 minute left.
It is by default not to misuse the system of StackOverflow. :)
meta.stackexchange.com/questions/85521/… and meta.stackexchange.com/questions/47814/…
1

You need to to using combination of single and double quote

change

onclick="showBlock("#idTextBlocks");"

to

onclick="showBlock('#idTextBlocks');"

Instead of passing id to function you can access the required element in funciton like this,

function showBlock() {
    $('#idTextBlocks').show('slow');
}
Improve this answer

3 Comments

Yes but then I will have to create three functions, because I have three links. So I'd rather pass the element's id to the function.
I've already tried single quotes. Please read the question properly.
You can't just put single quotes in a literal string delimited by single quotes. You need a backslash in front of every single quote in the string.
1

You're using jQuery anyway:

var $content = $('<div/>')
  .append('<a/>', {
    href: '#',
    click: function() { showBlock('#idTextBlocks'); },
    text: 'Show Text Block'
  });

Now you can append/prepend $content wherever you like.

Improve this answer

Comments

0 
html = '<div><a href="#" onclick="showBlock("#idTextBlocks");">Show Text Blocks</a></div>';

Try to remove the + operator when inserting value in your html variable, it has nosense since you just declared html as an empty string, especially a text one. (+= operator is most oftenly used to add value to a previous value eg 

a = 1; 
a += 2; 
alert(a) //alerts 3
Improve this answer

Comments

0

Try this:

<script type="text/javascript">
    var html = '<div><a href="#" onclick="javascript:showBlock(\'#idTextBlocks\');">Show Text Blocks</a></div>';
</script>
Improve this answer

1 Comment

Dude... Doesn't work. See it gets escaped at '#idTextBlocks'