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

问题描述

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

I have a plugin that im making use of called content.js http://innovastudio.com/content-builder.aspx

我将动态div添加到我希望为其分配了content.js插件的页面，因此我可以利用其功能.

Im adding in dynamic divs to the page which I would like to have the content.js plugin assigned to it, so I can make use of its functionality.

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

On a single div, or already defined div within the page, I dont appear to have any issues with multiple divs.

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

However if I add in a div with the same class, I cant seem to bind the plugin to it.

我已经包含了使用contentbuilder插件实例化div的代码，但是我想知道是否有一种方法可以将其绑定到添加到字母"类的新元素上.或者是否存在使用jquery将插件绑定到div的通用方法.

Ive included the code for instantiating the div with the contentbuilder plugin, but I wondering if there is a way to bind it to new elements that are added to the page with the class of "letter". Or if there is a generic way of binding plugins to divs using jquery.

$('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，请使用以下示例中的某个类:

If you must add these divs in a dinamic way, i think that you should init the plugin for each time that you add a new div. To avoid init same div twice, use some class like in the following example:

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插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！