title: Using jQuery on to bind plugin functionality with AJAX rendered HTML
body: <p><strong>Problem/misunderstanding)</strong> : How to bind jQuery plugin functionality such as <a href="https://vitalets.github.io/x-editable/" rel="nofollow">xEditable</a> or <a href="http://select2.github.io/select2/" rel="nofollow">Select2</a> to dynamic HTML fragments that are appended to a page </p>
  
  <p><strong>Example of simple dynamic event based scenario</strong>  I have appended data to a page, but needed to dynamically attach a click event, this seems simple as I have an event to bind.</p>
  
  <pre><code>$(document).on('click','.noteDelete',function (e) {
      var agreed = confirm("Are you sure you wish to delete?");
      if (agreed == true) {
          var elememt = $(this);
          var note    = elememt.data('note');
          deleteNote(elememt,note);
      }
  
      e.stopImmediatePropagation();
  });
  </code></pre>
  
  <p>The jQuery on : <code>.on( events [, selector ] [, data ], handler )</code></p>
  
  <p><strong>Example of how you would bind plugins</strong> Typically you would bind like so:</p>
  
  <pre><code>$(".select2Search").select2({
              placeholder: "Search..",
              minimumInputLength: 1,
              ajax: { 
                url: "&lt;g:createLink controller='example' action='search'/&gt;",
              dataType: 'json',
              data: function (term, page) {
                  return {
                      format:'json',
                      q: term
                  };
              },
              results: function (data, page) {
                return {results: data.values};
              }
            }
          });
  </code></pre>
  
  <p><strong>Question</strong> So... as I'm not binding an event, what is the appropriate approach for dynamically binding the plugin functionality to the AJAX rendered HTML fragment ?</p>