调用bootstrap模式时,jquery ready事件不起作用

时间:2016-11-19 01:44:57

标签: javascript jquery twitter-bootstrap dom

我创建了一个jquery菜单,因为我的li中有链接,这是由框架生成的,无法控制它。

我已经为我的代码创建了代码段。它在文档加载时工作正常。没有问题。

我有另一个用于登录和注册的自举按钮。

当我点击按钮时,它会破坏我用jQuery创建的菜单,并显示所有没有嵌套的链接。看起来它会调用另一个事件并打破它。

如果有人帮助解决这类问题,那将会很有帮助。

感谢。 V

.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>
pathfinding

2 个答案:

答案 0 :(得分:1)

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

您想要绑定到模态打开事件。

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

答案 1 :(得分:-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()中;我添加了我的代码来创建嵌套菜单。