调用引导模态时，jQuery ready事件不起作用

Question

我创建了一个jquery菜单，因为我的li中有链接，该菜单是由框架生成的，无法对其进行控制。

我已经为我的代码创建了代码段。 在加载文档时效果很好。 没有问题。

我还有另一个用于登录和注册的引导程序按钮。

当我单击按钮时，它打破了我用jQuery创建的菜单，并显示了所有没有嵌套的链接。 似乎它调用了另一个事件并将其中断。

如果有人帮助解决此类问题，那将是极大的帮助。

谢谢。 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

加载DOM时调用document.ready ，而不是打开模式时调用。

您要绑定到模式打开事件。

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

Answer 2

通过将此功能添加到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();
  });
});

在buildNavMenus（）;中 我添加了代码以创建嵌套菜单。