jQuery onclick模式

Question

我使用jQuery创建了一个表单模式：

<ul class="loginbar pull-right">
    <li class="hoverSelector">
        <i class="fa fa-globe"></i> 
        <a href="">Help</a>
    </li>
    <li class="topbar-devider">
    </li>
    <li id="id1 ">
        <a href="#"> Register</a>
    </li>
    <li class="topbar-devider">
    </li>
    <li>
        <a>Login</a>
    </li>
</ul>

表格代码

<div class="container">
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style="color: #f4a742">Register a new account</h4>
                </div>
                <div class="modal-body">
                    <div class="container content">
                        <div class="row">
                            <div class="col-md-6 ">
                                <form class="reg-page" id="RegID">
                                    <div class="form-group">
                                        <div class="form-group internal">
                                            <label>First Name</label> <input type="text" name="fname"
                                                class="form-control margin-bottom-20">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-group internal">
                                            <label>Last Name</label> <input type="text" name="lname"
                                                class="form-control margin-bottom-20">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-group internal">
                                            <label>Email Address <span class="color-red">*</span></label>
                                            <input type="text" name="email"
                                                class="form-control margin-bottom-20">
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-lg-6 checkbox">
                                            <label> <input type="checkbox"> I read <a
                                                href="page_terms.html" class="color-green">Terms and
                                                    Conditions</a>
                                            </label>
                                        </div>
                                        <div class="col-lg-6 text-right">
                                            <button class="btn-u" type="submit">Register</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div> <!-- end content -->
                </div> <!-- end modal-body -->
            </div> <!-- end modal-content -->
        </div> <!-- end modal-dialog -->
    </div> <!-- end modal -->
</div> <!-- end container -->

<script>
$( "#id1" ).click(function() {
      $( "#myModal" ).click();
    });
</script>

似乎一切对我都没问题，最初是工作，但突然间它给了麻烦，所以会出现什么错误。

当我点击注册时，它没有弹出表格，请你告诉我我做了什么错误。

Answer 1

$( "#id1" ).click(function(ev) {
    ev.stopImmediatePropagation(); // sometimes click event fires twice in jQuery you can prevent it by this method.
    $( "#myModal" ).modal(); // you should use native function of Bootstrap.
});

Answer 2

你不需要在第一时间为它添加任何jquery或js。

因此，您需要添加data-target属性来定位myModal，

<li id="id1 "><a href="#" type="button" data-toggle="modal" data-target="#myModal"> Register</a></li>

所以你的标记看起来应该是，

<ul class="loginbar pull-right">
   <li class="hoverSelector"><i class="fa fa-globe"></i>
   <a href="">Help</a></li>
   <li class="topbar-devider"></li>
   <li id="id1 "><a href="#" type="button" data-toggle="modal" data-target="#myModal"> Register</a></li>
   <li class="topbar-devider"></li>
   <li><a>Login</a></li>
</ul>

替代您的js要求，您可以在click a代码的$('ul.loginbar').on('click', 'li#id1 > a', function(){ $('div#myModal').modal('show'); }); 上执行此操作，

ActiveWindow.View.SplitSpecial = wdPaneRevisionsVert