結合動態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'); 
}