jQuery Onclick modal

Question

Ich habe ein Formular modal mit jQuery erstellt:

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

Formular Code

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

Es scheint alles für mich in Ordnung ist, initial war es Arbeit, aber plötzlich ist es Schwierigkeiten geben, also was wäre der Fehler.

Wenn ich jemals auf Register klicken, ist es nicht Pop-up-Formular, können Sie bitte lassen Sie mich wissen, welchen Fehler ich gemacht habe.

Vielen Dank im Voraus

V Vamsi krishna

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

Sie brauchen nicht jede jquery oder js für die an erster Stelle hinzuzufügen.

So müssen Sie data-target Attribut hinzufügen, um Ihre myModal Ziel,

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

So Markup Sie aussehen sollte,

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

Alternative zu Ihrem js Anforderung könnte man es auf click von a tun tag,

$('ul.loginbar').on('click', 'li#id1 > a', function(){ 
    $('div#myModal').modal('show'); 
});