add tinymce for new element loaded dynamicaly

问题

My page is lodaed with 5 divs which can be edited by Tinymce inline editor. I've a peace of Jquery loding 5 new ones by clicking on a button (so dynamicaly). But of course the new ones are not affected by Tinymce, as the init has already been loaded... How can I manage to activate tinymce for new divs please?

My HTML :

<div id=\"billetdroit\">
            <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
        <div class=\"editable\" id=\"tiny_01\">blablabla2</div>
        </div>
<div id=\"billetdroit\">
                <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
            <div class=\"editable\" id=\"tiny_02\">blablabla2</div>
            </div>
<div id=\"billetdroit\">
                <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
            <div class=\"editable\" id=\"tiny_03\">blablabla2</div>
            </div>

...
...

And a button: when you click, it make appears 5 more divs "billetdroit" dynamicaly

My tinymce init:

tinymce.init({
                    selector: "textarea",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                 });
                 tinymce.init({
                    selector: "h1.editable",
                    language: 'fr_FR',
                    inline: true,
                    toolbar: "undo redo",
                    menubar: false
                });

                tinymce.init({
                    selector: "div.editable",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    inline: true,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                });

Any solution? Thanks

EDIT:

I tryied that:

$(document).ready(function() {

    var track_click = 1; //track user click on "load more" button, righ now it is 0 click

    var total_pages = Globals.total_pages;

//    $('#results').load("loadmore.php", {'page':track_click}, function() {track_click++;}); //initial data to load


    $(".load_more").click(function (e) { //user clicks on button

        $(this).hide(); //hide load more button on click
        $('.animation_image').show(); //show loading image

        if(track_click <= total_pages) //user click number is still less than total pages
        {
            //post page number and load returned data into result element
            $.post('loadmore.php',{'page': track_click}, function(data) {

                $(".load_more").show(); //bring back load more button

                $("#results").append(data); //append data received from server

                //scroll page smoothly to button id
                $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);

                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received

                track_click++; //user click increment on load button

            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
                alert(thrownError); //alert with HTTP error
                $(".load_more").show(); //bring back load more button
                $('.animation_image').hide(); //hide loading image once data is received
            });


            if(track_click >= total_pages-1) //compare user click with page number
            {
                //reached end of the page yet? disable load button
                $(".load_more").attr("disabled", "disabled");
            }
         }
         $.getScript('include/tinymce/tinymce.min.js', function() {
            tinymce.init({
                    selector: "textarea",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                 });
                 tinymce.init({
                    selector: "h1.editable",
                    language: 'fr_FR',
                    inline: true,
                    toolbar: "undo redo",
                    menubar: false
                });

                tinymce.init({
                    selector: "div.editable",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    inline: true,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                });
            });

        });
});

But without success...

回答1:

There is an easy way to init tinymce editors:

tinyMCE.execCommand("mceAddControl", false, 'your_div_id');

来源：https://stackoverflow.com/questions/17031589/add-tinymce-for-new-element-loaded-dynamicaly