jquery reusable handler function for event binding n how to send an array of eventData parameters/arguments for dynamic inline ckeditor instances

today i learned how to write reusable jquery handler functions for event binding n how to send an array of eventData parameters/arguments to the handler n how to extract them in the handler.

the context for this was to optimise code reuse for dynamic, inline ckeditor instances, to make them initialized/editable on doubleclick/dblclick, instead of the default single click.

what i'll show u further down is an improvement on this original, user-written ckeditor code i started out with:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// note: this block is inside "document ready" var ed = { init: function () { ed.wysiwyg(); }, wysiwyg: function () { $(".ckeditorInline") .on("dblclick", function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr("contenteditable", "true"); CKEDITOR.inline(this); // "Turns a DOM element with the contenteditable attribute set to true into a CKEditor instance" $(this).focus(); // makes the toolbar popup after a double click. (you'd think it would b click(), but not in this case) }); } }; ed.init();

n when i needed to initialize a dynamic ckeditor instance i had to duplicate some of the code, like this:

1 2 3 4 5 6 7 8 9 10

// inside some other function // ... item.find(".ckeditorInline").on("dblclick", function (e) { e.preventDefault(); e.stopPropagation(); $(this).attr("contenteditable", "true"); CKEDITOR.inline(this); $(this).focus(); }); // ...

not very effective, right?

here's how i improved it, as described up top:

1 2 3 4 5 6 7 8 9 10

var bindDblclickToCkeditorInline = function(event) { event.preventDefault(); event.stopPropagation(); $(this).attr("contenteditable", "true"); CKEDITOR.inline(this); $(this).focus(); console.log(event.data); // print the eventData array param }; $(".ckeditorInline").dblclick(["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

n now when i need to initialize a dynamic ckeditor instance i can reuse the code w a simple one-liner, like this:

1 2 3 4

// inside some other function // ... item.find(".ckeditorInline").dblclick(["dynamic ckeditor instance", "a different param"], bindDblclickToCkeditorInline); // ...

cool, huh?

i got this idea while reading the jquery dblclick() api page.



UPDATE 20150930

after writing this post yesterday i discovered an extremely useful piece of information regarding jquery binding, so that i don't even need that one-liner to manually bind dynamically added DOM elements: "binding way up the DOM tree".

the only change needed is to line 10 above:

10	$(".ckeditorInline").dblclick(["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

change it to this and u won't need to do anything extra for dynamically added elements (i.e. code block #4 on this page is now unnecessary!):

10	$("body").on("dblclick", ".ckeditorInline", ["existing ckeditor instance on pageload", "a second param"], bindDblclickToCkeditorInline);

###

i used hilite.me for source code highlighting:

hilite.me converts your code snippets into pretty-printed HTML format, easily embeddable into blog posts, emails and websites.

[SOLVED] dynamically created jquery-ui ".resizable" div not resizing

i have jquery code inside a document.ready function that initializes all existing ".resizable" divs with a list of options n custom event listener functions
here's how i was able to add a dynamic jquery-ui resizable div to the HTML DOM n initialize it so it's immediately resizable AND has the same options config that the pre-existing resizable divs got in the main document.ready resizable declaration:

below is a jquery method  where i create a dynamic div (elem), with an inner div w class "resizable ui-resizable" that i want to initialize as "resizable":

$(".selector").on("someevent", function(){
  ...
  // the dynamic div, elem, gets a "resizable" child div
  elem.html('<div class="resizable ui-resizable"><p>dynamic, resizable div</p></div>');
  ...

  // get the resizable options(+event functions: create, start, stop, resize)
  var options = $( ".resizable" ).resizable( "option" );
  // get the elem div's inner "resizable" div
  var resizeElem = elem.find('.resizable');
  // initialize it w the options declared elsewhere in the document.ready script--we don't need to write double code
  resizeElem.resizable(options);
  // this last part was key to get it working--u have to get the instance, then initialize THAT w the options TOO!
  var resizeInst = resizeElem.resizable("instance");
  resizeInst.option( options );

}