Das jquery ready-Ereignis funktioniert nicht, wenn das Bootstrap-Modal

Question

heißt.

Ich habe ein Jquery-Menü erstellt, da ich Links in meinem li habe, die von einem Framework generiert werden und keine Kontrolle darüber haben können.

Ich habe das Snippet für meinen Code erstellt. Es funktioniert gut beim Laden von Dokumenten. Keine Probleme.

Ich habe eine andere Bootstrap-Taste für die Anmeldung und Anmeldung.

Als ich auf die Schaltfläche klicke bricht es mein Menü, das mit jQuery erstellt und zeigen alle Links ohne Verschachtelung. Es scheint, als ob es ein anderes Ereignis nennt und es bricht es.

Es wird eine große Hilfe sein, wenn jemand hilft, diese Art von Problem anzugehen.

Danke. 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 aufgerufen, wenn der DOM, nicht geladen wird, wenn die modale geöffnet wird.

Sie möchten an das modale open-Ereignis binden.

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

Answer 2

Ich habe meinen Code bekam Arbeit durch das Hinzufügen dieser Funktion zu meinem 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(); Ich habe meinen Code hinzugefügt, um ein verschachteltes Menü zu erstellen.