31624

binding dynamic dom elements to content.js plugin

Question:

I have a plugin that im making use of called content.js <a href="http://innovastudio.com/content-builder.aspx" rel="nofollow">http://innovastudio.com/content-builder.aspx</a>

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.

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

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

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 } });

Answer1:

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'); }

Recommend

  • add and remove classes in order with jQuery
  • Parse Javascript Array
  • iphone how to send my project build to someone else
  • Saving application state AIR
  • Limit on amount of rows retrieved MySql, Laravel
  • C# Application Relative Paths
  • wpf: update multiple controls via dispatcher
  • Is there a limit on how long a cfquery with cfqueryparam can get?
  • Unable to get CAP_CHOWN and CAP_DAC_OVERRIDE working for regular user
  • touchstart in JavaScript no longer returns TouchList
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • Generic classes with Collection getter of other types
  • What is this strange character in chrome's resource css viewer?
  • Unix Network Programming Clarification
  • How can I reset dropdown data if modal closed on vue component?
  • How to repeat sections of a SQL query across UNIONs? (DRY in SQL)
  • Get the pasted content on document on paste event
  • Knockout custom binding handler
  • Exception gevent.hub.LoopExit: LoopExit('This operation would block forever',)
  • how to set variables in a php include file?
  • Eloquent paginate function in Slim 3 project using twig
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Android screen density dpi vs ppi
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Bug in WPF DataGrid
  • Python: how to group similar lists together in a list of lists?
  • Acquiring multiple attributes from .xml file in c#
  • Understanding cpu registers
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • How can I remove ASP.NET Designer.cs files?
  • unknown Exception android
  • Is there any way to bind data to data.frame by some index?
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal