Javascript 将动态dom元素绑定到content.js插件

我有一个我正在使用的插件，叫做content.js

我在页面中添加了动态divs，我想为其分配content.js插件，这样我就可以利用它的功能了

对于单个div，或者页面中已经定义的div，我似乎没有任何关于多个div的问题

但是，如果我添加了一个具有相同类的div，我似乎无法将插件绑定到它

我包含了用contentbuilder插件实例化div的代码，但我想知道是否有办法将其绑定到使用字母类添加到页面中的新元素。或者如果有一种使用jquery将插件绑定到div的通用方法

$('div.letter').contentbuilder({
            enableZoom:false,
            snippetOpen: true,
            imageselect: 'images.html',
            fileselect: 'images.html',
            snippetFile: '/assets/templates/content-builder/default/snippets.html',
            toolbar: 'left',
            //sourceEditor: false,
            onDrop:function(){
               // function for when an item is dragged into the editable area   
            },
            onRender: function () {
                var coverLength     = $("#coverpage div.row").length;
                var mainContent     = $("#maincontent div.row").length;
                if(coverLength == 0)
                {
                    $("#coverpage").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
                }
                else
                {
                    $("#coverpage div.no-content-on-page").remove();
                }
                if(mainContent == 0)
                {
                    $("#maincontent").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
                }
                else
                {
                    $("#maincontent div.no-content-on-page").remove();
                }


                //custom script here
            }      
        });       

---

如果您必须以dinamic方式添加这些div，我认为您应该在每次添加新div时初始化插件。为了避免两次初始化同一div，请使用以下示例中的类：

function createLetter(){
   $("body").append('<div class="letter mustBeActivated"></div>');
   initContentBuilder();
}

function initContentBuilder(){


 $('div.letter.mustBeActivated').contentbuilder({
            enableZoom:false,
            snippetOpen: true,
            imageselect: 'images.html',
            fileselect: 'images.html',
            snippetFile: '/assets/templates/content-builder/default/snippets.html',
            toolbar: 'left',
            //sourceEditor: false,
            onDrop:function(){
               // function for when an item is dragged into the editable area   
            },
            onRender: function () {
                var coverLength     = $("#coverpage div.row").length;
                var mainContent     = $("#maincontent div.row").length;
                if(coverLength == 0)
                {
                    $("#coverpage").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
                }
                else
                {
                    $("#coverpage div.no-content-on-page").remove();
                }
                if(mainContent == 0)
                {
                    $("#maincontent").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
                }
                else
                {
                    $("#maincontent div.no-content-on-page").remove();
                }


                //custom script here
            }      
        }).removeClass('mustBeActivated');
}