jquery on show and on hide not working with class selector - jquery-selectors

Question

I am trying to enter certain roles in a text area and have it highlighted in a popup block using bootstrap.
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
<textarea name="options" id="options" cols="30" rows="10">admin user</textarea>
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal hide fade" id="myModal" class="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<div>
<ul>
<li class="mlist">admin</li>
<li class="mlist">user</li>
<li class="mlist">guest</li>
<li class="mlist">blank</li>
</ul>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
<script type="text/javascript">
$(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 < 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');
}
</script>

Answer 1

I guess it's something to do with your div having two class tags.
<div class="modal hide fade" id="myModal" class="myModal">
Change to
<div class="modal hide fade myModal" id="myModal">