jquery ready event is not working when bootstrap modal is called

Question

I have created a jquery menu as I have links in my li, which is generated by a framework and can not have control over it.

I have created the snippet for my code. It works fine on document load. No issues.

I have another bootstrap button for sign in and sign up.

As i click on button it breaks my menu which created with jQuery and show all links without nesting. It seems like it calls another event and it breaks it.

It will be great help if some one help to tackle this sort of issue.

Thanks. V

 $(document).ready(function(){ $.fn.chunk = function(size) { var arr = []; for (var i = 0; i < this.length; i += size) { arr.push(this.slice(i, i + size)); } return this.pushStack(arr, "chunk", size); } var listItems = $("ul.nav li div"); listItems.each(function() { var contentIds = $(this).attr("id"); if(contentIds != 'homeLink' && contentIds != 'jobBoardLink' && contentIds != 'contentLink10000001' && contentIds != 'contentLink20000002' && contentIds != 'contentLink30000003' && contentIds != 'contentLink40000004'){ $(this).parent().appendTo('#contentLink10000001'); if(contentIds.indexOf('contentLink2') !== -1){ $(this).parent().appendTo('#contentLink20000002'); } if(contentIds.indexOf('contentLink3') !== -1){ $(this).parent().appendTo('#contentLink30000003'); } if(contentIds.indexOf('contentLink4') !== -1){ $(this).parent().appendTo('#contentLink40000004'); } } }); $('#contentLink10000001 > a,#contentLink20000002 > a,#contentLink30000003 > a,#contentLink40000004 > a').removeAttr('href'); var liCount = $('#contentLink10000001 li,#contentLink20000002 li,#contentLink30000003 li,#contentLink40000004 li').length; $("#contentLink10000001 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); $("#contentLink20000002 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); $("#contentLink30000003 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); $("#contentLink40000004 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); }); 

 .navbar-nav> li{ float: left; position:relative; } .navbar-nav> li:hover{ display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Button trigger modal --> <div class="container"> <center> <button class="btn btn-primary btn-lg" href="#signup" data-toggle="modal" data-target=".bs-modal-sm">Sign In/Register</button> </center> </div> <!-- Modal --> <div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <br> <div class="bs-example bs-example-tabs"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#signin" data-toggle="tab">Sign In</a></li> <li class=""><a href="#signup" data-toggle="tab">Register</a></li> <li class=""><a href="#why" data-toggle="tab">Why?</a></li> </ul> </div> <div class="modal-body"> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in" id="why"> <p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p> <p></p><br> Please contact <a mailto:href="JoeSixPack@Sixpacksrus.com"></a>JoeSixPack@Sixpacksrus.com</a> for any other inquiries.</p> </div> <div class="tab-pane fade active in" id="signin"> <form class="form-horizontal"> <fieldset> <!-- Sign In Form --> <!-- Text input--> <div class="control-group"> <label class="control-label" for="userid">Alias:</label> <div class="controls"> <input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required=""> </div> </div> <!-- Password input--> <div class="control-group"> <label class="control-label" for="passwordinput">Password:</label> <div class="controls"> <input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium"> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="control-group"> <label class="control-label" for="rememberme"></label> <div class="controls"> <label class="checkbox inline" for="rememberme-0"> <input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me"> Remember me </label> </div> </div> <!-- Button --> <div class="control-group"> <label class="control-label" for="signin"></label> <div class="controls"> <button id="signin" name="signin" class="btn btn-success">Sign In</button> </div> </div> </fieldset> </form> </div> </div> </div> <div class="modal-footer"> <center> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </center> </div> </div> </div> </div> <ul class="nav navbar-nav"> <li> <div class="link" id="contentLink10000001"><ins> </ins><a href="http://link1.html" target="_blank" data-processed="Y">Parent Link 1</a></div> </li> <li> <div class="link" id="contentLink20000002"><ins> </ins><a href="#" target="_blank" data-processed="Y">Parent Link 2</a></div> </li> <li> <div class="link" id="contentLink1000006"><ins> </ins><a href="cLInk1" target="_blank" data-processed="Y">Child Link 1</a></div> </li> <li> <div class="link" id="contentLink1000002"><ins> </ins><a href="cLink2" target="_blank" data-processed="Y">Child Link 2</a></div> </li> <li> <div class="link" id="contentLink1000003"><ins> </ins><a href="cLink3" target="_blank" data-processed="Y">Child Link 3</a></div> </li> <li> <div class="link" id="contentLink1000004"><ins> </ins><a href="cLink4" target="_blank" data-processed="Y">Child Link 4</a></div> </li> </li> <li> <div class="link" id="contentLink2000014"><ins> </ins><a href="cLink5" target="_blank" data-processed="Y">Child Link 5</a></div> </li> <li> <div class="link" id="contentLink2000015"><ins> </ins><a href="cLink6" target="_blank" data-processed="Y">Child Link 6</a></div> </li> <li> <div class="link" id="contentLink2000016"><ins> </ins><a href="cLink7" target="_blank" data-processed="Y">Child Link 7</a></div> </li> <li> <div class="link" id="contentLink30000003"><ins> </ins><a href="#" target="_blank" data-processed="Y">Parent Link 3 </a></div> </li> <li> <div class="link" id="contentLink3000001"><ins> </ins><a href="cLink8" target="_blank" data-processed="Y">Child Link 8</a></div> </li> <li> <div class="link" id="contentLink40000004"><ins> </ins><a href="#" target="_blank" data-processed="Y">Parent Link 4 </a></div> </li> <li> <div class="link" id="contentLink4000001"><ins> </ins><a href="cLink9" target="_blank" data-processed="Y">Child Link 9</a></div> </li> </ul> 

Answer 1

document.ready is called when the DOM is loaded, not when the modal is opened.

You want to bind to the modal open event.

$('#modal-content').on('shown.bs.modal', function() {
  $("#txtname").focus();
})

Answer 2

I have got my code working by adding this function to my jQuery

$(document).ready(function(){
  $.fn.chunk = function(size) {
    var arr = [];
    for (var i = 0; i < this.length; i += size) {
      arr.push(this.slice(i, i + size));
    }
    return this.pushStack(arr, "chunk", size);
  }
  buildNavMenus();
  $( document ).ajaxComplete(function() {
    buildNavMenus();
  });
});

in buildNavMenus(); I have added my code to create nested menu.