title: jquery on show and on hide not working with class selector
body: <p>I am trying to enter certain roles in a text area and have it highlighted in a popup block using bootstrap.</p>
  
  <p>The expected behavior is that the selected roles must be highlighted, the code works when I use the id selector to the jquery, but the same code does not work with class selector</p>
  
  <pre><code>&lt;textarea name="options" id="options" cols="30" rows="10"&gt;admin user&lt;/textarea&gt;
  
  
  &lt;a class="btn" data-toggle="modal" href="#myModal"&gt;Launch Modal&lt;/a&gt;
  &lt;div class="modal hide fade" id="myModal" class="myModal"&gt;
      &lt;div class="modal-header"&gt;
          &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
          &lt;h3&gt;Modal header&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li class="mlist"&gt;admin&lt;/li&gt;
                  &lt;li class="mlist"&gt;user&lt;/li&gt;
                  &lt;li class="mlist"&gt;guest&lt;/li&gt;
                  &lt;li class="mlist"&gt;blank&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function (){
          console.log('Inside onready');
          $('.myModal').on('show', function () {
              console.log('Inside show');
              var option = $('#options').val();
              var options = option.split(" ");
              console.log('Selected roles: ' + options);
  
              for (var index = 0; index &lt; options.length; index++) {
                  highlight(options[index]);
              };
          });
          $('.myModal').on('hide', function () {
              console.log('Inside onhide');
              $('.mlist').removeClass('btn-primary');
          });
      });
  
      function highlight(parOptions) {
          $('.mlist:contains("' + parOptions +'")').addClass('btn-primary');
      }
  
  &lt;/script&gt;
  </code></pre>