结合动态DOM元素content.js插件

Question

我有一个即时通讯一种名为content.js http://innovastudio.com/content-builder.aspx

林添加动态的div，而我想有content.js页面插件分配使用插件所以我可以利用它的功能。

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

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

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