jquery click function and another jquery script

Question

Hi,

i insert many texarea's, and teaxarea's with tiny mce (WYSIWYG). But when i Insert this teaxarea's from this function Tiny MCS don't work. Why?

Thanks

$(document).ready(function(){
  $("#InsertNew").click(function() {
   $('<textarea id = "tinyMCE"></textarea>').appendTo($('#textBody'));
  });
 });

Answer 1

you mentioned you are using many text areas, the place ur trying to append to is #textBody (an id). If you are not aware, you can only have one instance of an ID per page. Instead use a classes: class="textBody" in your html then try:

$('<textarea id = "tinyMCE"></textarea>').appendTo('.textBody');

Answer 2

Most likely, because TinyMCE has an initializer that scans the document looking for textareas and applies some magic on the ones that finds. Whatever you add later won't inherit this. You have to either:

1. Re-run the TinyMCE initializer on every new item
2. Configure TinyMCE to detect new areas

Since TinyMCE is not a jQuery plugin, I suppose you can only do #1.

Answer 3

I think this forum post is what you are looking for.

You will need to use the jQuery live method and a trick explained at the link above.

Answer 4

Well your code looks like this:

<textarea id="tinyMCE"></textarea>

So what is happening here? You just add a textarea with the ID="tinyMCE" but no behaviour is added to the TextArea.

In jQuery I would expect at least the following:

<textarea class="tinyMCE"></textarea>

or event better:

$('<textarea></textarea>').tinyMCE().appendTo($('#textBody'));   

EDIT:

You might try something like this...

$('<textarea id="UniqueId"></textarea>').tinyMCE().appendTo($('#textBody'));   
tinyMCE.init({
  mode : "exact",
  elements : "UniqueId"
});

On the tinyMCE-Formus is already a diskussion going on...

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=15477