jQuery plugin to apply also on dynamically created elements -

i'm writing jquery plugin should handle information on links specify open behavior.

for example, want supports markup :

1. <a href="somewhere" data-openmode="newwindow" class="openmode" />
2. <a href="somewhere" data-openmode="modal" class="openmode" />
3. <a href="somewhere" class="openmode" /> <!-- not specified -->

the first should open in new window, second in modal dialog, third should open native behavior (whatever target has been set on tag).

i create plugin behavior generic possible. i've written now:

(function ($) {     $.fn.myopenmode = function () {         return this.mousedown(function () {             var $this = $(this);              var mode = $this.data("openmode");             var href = this.href;             var handled = true;             if (mode) {                 switch (mode) {                     case "newwindow":                     case "1":                         window.open(href, "_blank");                         break;                     case "dialog":                     case "2":                         openasdialog(href);                         break;                      // actually, there other options, removed them clarity                      default:                         handled = false;                 }             }             else {                 handled = false;             }             return !handled;         });     }; })(jquery); 

this code allows me call page like:

$(function(){     $(".openmode").myopenmode(); }); 

this working statically generated tags. however, applications may generate markup dynamically (most of time using jsrender, not matters).

but because behavior set once when javascript file loaded, won't take dynamically generated objects.

what should handle requirement?

1. i tried use on method monitor load events, not works :

   $(function(){     $(document).on("load",".openmode", function() { $(this).myopenmode(); }); }); 

   i understand not works because "load" event not bubbles

2. i thinking modifying plugin put "on" inside plugin, don't idea because introduces out of scope behavior in plugin

3. i can call plugin each time dynamic node created, introduce dependencies other parts. plugin won't autonomous like.

does has suggestion handle requirement, keeping plugin isolated possible?

[edit] should works ie8 , later (and ideally other browsers)

[edit] here jsfiddle illustrate issue (just click on add , try click on newly created element).

plugins added $.fn should apply listed elements, , not future elements.

you should concentrate on having plugin provide mechanism, e.g.:

(function($) {      $.fn.openmode = function(cmd) {         cmd = cmd || 'on';          switch (cmd) {              case 'click':                 // read props, open windows, etc                 break;              case 'on':                 this.addclass('openmode');                 break;              case 'off':                 this.removeclass('openmode');                 break;          }     });  })(jquery); 

and allow plugin user register event handler triggers mechanism, using event delegation if necessary:

$(document).on('click', 'a.openmode', function() {     $(this).openmode('click'); }); 

the latter code put jquery namespace too, utility function:

(function($) {     $.openmode = function(cmd) {         cmd = cmd || 'on';          switch (cmd) {              case 'on':                 $(document).on('click.openmode', 'a.openmode', function() {                     $(this).openmode('click');                 });                 break;              case 'off':                 $(document).off('click.openmode', 'a.openmode');                 break;         }      }; })(jquery); 

such calling:

$.openmode(); 

will work required enable plugin every current (and future) .openmode element.