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

binding dynamic dom elements to content.js plugin

本文关键字：content js 插件绑定动态 dom 元素更新时间：2023-09-26

我有一个插件，我正在使用称为content.js http://innovastudio.com/content-builder.aspx

我添加在动态div页面，我想有内容。js插件分配给它，所以我可以利用它的功能。

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

但是，如果我添加一个div与相同的类，我似乎不能绑定插件到它。

我包含的代码实例化的div与contentbuilder插件，但我想知道是否有一种方法将它绑定到添加到页面的新元素与类"信"。或者如果有一种通用的方法可以使用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
            }      
        });

如果你必须以动态的方式添加这些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');
}