Keep javascript within new javascript element

Question

I am developing a webpage but I came into some trouble with some javascript code.

I am using the Nicedit as WYSIWYG for textareas, which, as stated in its main page, is as easy as copy/paste this 2 lines anywhere in my web page:

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>         

That's working great with the default textareas of the page. The problem is that I also have this javascript to add more textareas:

function addchapter()
  {
  if (num_chapter < 10)
    {
    var num=num_chapter+1;
    document.getElementById('chapters').innerHTML += "<h3>Chapter " + num + "</h3> Title: <input type='text' name='titlechapter_" + num + "'><br>Content:<textarea  name='chapter_" + num + "'></textarea>";
    }
  else if (num_chapter == 10)
    {
    document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters.";
    }
  num_chapter += 1;
  }

So when I add a textarea through javascript, it doesn't have the proper style; it's not implementing Nicedit. The thing is that the textareas are all standard, so there's no difference between the code in both cases. I don't know too much of javascript but I think that the problem might be that the Nicedit code runs ONCE when the page loads, and that's it. Any idea of how to make it run when the page loads (<= already done) AND when the addchapter function is run?

The relevant HTML bit is this:

 <div id="chapters">
 </div>
 <button type="button" onclick="addchapter()"> Add chapter </button>

My page where you can see the odd behaviour is this (broken link), under Chapter 1 you see the 'Add chapter' button.

Thank you all so much.

EDIT 1, Error console output: When the page loads it throws this:

"GET http://js.nicedit.com/nicEditIcons-latest.gif 
bkClass.extend.getStylenicEdit-latest.js:8
bkClass.extend.constructnicEdit-latest.js:38
AnicEdit-latest.js:8
bkClass.extend.addInstancenicEdit-latest.js:37
bkClass.extend.panelInstancenicEdit-latest.js:37
nicEditors.allTextAreasnicEdit-latest.js:37
bkLib.domLoaded"

When I add a new chapter:

"Uncaught TypeError: Object #<bkClass> has no method 'removeInstance'
bkClass.extend.checkReplacenicEdit-latest.js:37
bkClass.extend.panelInstancenicEdit-latest.js:37
nicEditors.allTextAreasnicEdit-latest.js:37
(anonymous function)/file/new/:112
onclick"

Answer 1

You have to assign a unique ID to the text fields you add to the page. To convert it into an editor you can then call;

nicEditors.findEditor(editorID);

Or you can call nicEditors.allTextAreas() again. But I'm not sure if that will remove the existing content from the editors that already exist.

Source: The API.

Answer 2

You can add try{}catch(e){} block to your code

jQuery('.js-control-des').each(function () {
            var index = jQuery(this).attr('lang');
            var editor = jQuery(this).find('textarea');
            var editor_id = editor.attr('id');
            var editor_loaded = editor.attr('rel');
            if (editor_loaded == undefined || editor_loaded != null || editor_loaded == 0) {
                var editor_new_width = parseFloat(editor.css('min-width')) + 7 + 'px';
                editor.css({
                    width: editor_new_width,
                    'max-width': editor_new_width,
                    'min-width': editor_new_width
                });
                try {
                    new nicEditor({maxHeight: 300}).panelInstance(editor_id);
                    jQuery(this).attr('rel', 'editor-loaded');
                    jQuery(this).find('.nicEdit-main').attr('data-index', index).keyup(function (e) {
                        if (vnLineUcp.editorKeyUp(jQuery(this)) == false) {
                            return false;
                        }
                    });
                } catch (e) {
                }
            }
        });