title: jQuery plugin to apply also on dynamically created elements
body: <p>I'm writing a jquery plugin that should handle extra information on links to specify open behavior.</p>
  
  <p>For example, I want to supports markup like :</p>
  
  <ol>
  <li><code>&lt;a href="somewhere" data-openmode="NewWindow" class="openmode" /&gt;</code></li>
  <li><code>&lt;a href="somewhere" data-openmode="Modal" class="openmode" /&gt;</code></li>
  <li><code>&lt;a href="somewhere" class="openmode" /&gt; &lt;!-- Not specified --&gt;</code></li>
  </ol>
  
  <p>The first should open in a new window, the second in a modal dialog, the third should open with the native behavior (whatever target has been set on the tag).</p>
  
  <p>I would like to create a plugin for this behavior as generic as possible. I've written by now:</p>
  
  <pre><code>(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 are other options, but I removed them for clarity
  
                      default:
                          handled = false;
                  }
              }
              else {
                  handled = false;
              }
              return !handled;
          });
      };
  })(jQuery);
  </code></pre>
  
  <p>This code allows me to call from any page something like:</p>
  
  <pre><code>$(function(){
      $(".openmode").myOpenMode();
  });
  </code></pre>
  
  <p>This is working for statically generated tags. However, my applications may generate markup dynamically (most of time using jsRender, but this does not matters).</p>
  
  <p>But because this behavior is set up once when the javascript file is loaded, it won't take dynamically generated objects.</p>
  
  <p>What should I do to handle my requirement?</p>
  
  <ol>
  <li><p>I tried to use the <code>on</code> method to monitor load events, but this does not works :</p>
  
  <pre><code>$(function(){
      $(document).on("load",".openmode", function() { $(this).myOpenMode(); });
  });
  </code></pre>
  
  <p>I understand this does not works because the "load" event does not bubbles</p></li>
  <li><p>I was thinking about modifying my plugin to put the "on" inside the plugin, but I don't like this idea because it introduces some out of scope behavior in the plugin</p></li>
  <li><p>I can also call the plugin each time a dynamic node is created, but it will also introduce dependencies into other parts. My plugin won't be as autonomous as I would like.</p></li>
  </ol>
  
  <p>Does anyone has a suggestion to handle my requirement, keeping my plugin as isolated as possible?</p>
  
  <p><strong>[edit]</strong> This should works with IE8 and later (and ideally with other browsers)</p>
  
  <p><strong>[edit]</strong> here is a <a href="http://jsfiddle.net/stevebeauge/7cqXC/" rel="noreferrer">jsFiddle</a> that illustrate the issue (just click on <code>Add</code> and try to click on the newly created element).</p>