Question

我有一个使用被称为content.js http://innovastudio.com/content-builder.aspx

的插件

我在动态div中加入了我想要分配给它的content.js插件的页面，所以我可以利用它的功能。

在单个div或页面中已经定义的div上，我似乎没有多个div的任何问题。

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

我已经包含了使用contentbuilder插件实例化div的代码，但我想知道是否有办法将它绑定到添加到＆＃34;字母＆＃34;类的页面的新元素。或者，如果有一种使用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
            }      
        });

Answer 1

如果你必须以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');
}

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

1 个答案: