Custom Jquery Not Available At Runtime With Dynamicallly Added Html
<p>I have a page that looks like this..</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;JQM&lt;/title&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"&gt; 
  &lt;script src="http://code.jquery.com/jquery-1.8.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(function(){
      $('[data-role="list-divider"]').toggle(function(){
        $('.'+$(this).attr('data-link')).addClass('show');
        $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

      },function(){
        $('.'+$(this).attr('data-link')).removeClass('show');
        $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
      });
    });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div data-role="page"&gt;
    &lt;div data-role="header"&gt;

    &lt;/div&gt;
    &lt;div data-role="content"&gt;   


    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I am adding html in dymanically from the server in the content area. The problem is that when I add the content dynamically, the jquery function that I created statically on the page doesnt engage..</p>

<pre><code>&lt;script&gt;
        $(function(){
          $('[data-role="list-divider"]').toggle(function(){
            $('.'+$(this).attr('data-link')).addClass('show');
            $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

          },function(){
            $('.'+$(this).attr('data-link')).removeClass('show');
            $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
          });
        });
      &lt;/script&gt;
</code></pre>

<p>If I add the html statically all the code works fine and everything is good. My question is how do I make this jquery available to run once html is added to the page from the server?</p>

<p>I DID THIS AND IT WORKED, is there a more elegant way using .on or is this fine?</p>

<pre><code>//got html blob
  deferred.success(function (res) {

   $(function () {
                $('[data-role="list-divider"]').toggle(function () {
                    $('.' + $(this).attr('data-link')).addClass('show');
                    $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

                }, function () {
                    $('.' + $(this).attr('data-link')).removeClass('show');
                    $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
                });
            });
 });
</code></pre>
