2016-11-19 28 views
0

我創建了一個jquery菜單,因爲我的鏈接中存在鏈接,這是由框架生成的,並且無法控制它。當引導模式被調用時,jquery ready事件不起作用

我已經爲我的代碼創建了代碼片段。它在文檔加載時工作正常。沒有問題。

我有另一個引導按鈕用於登錄和註冊。

當我點擊按鈕,它打破了我用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="[email protected]"></a>[email protected]</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>

+0

選擇器沒有意義......'contentLink10000001 li'不存在。如果你對這個代碼應該做什麼給出了適當的解釋並且以更具體的術語定義*「打破菜單」*會有所幫助 – charlietfl

回答

1

document.ready當DOM被加載,而不是當模態被打開時被調用。

您想綁定到模態打開事件。

$('#modal-content').on('shown.bs.modal', function() { 
    $("#txtname").focus(); 
}) 
-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

()工作;我已經添加了我的代碼來創建嵌套菜單。

相關問題