ブートストラップモーダルの起動時間を増やす

Question

ブートストラップモーダルはアクションを1回実行し、再度クリックすると2回以上起動します。

<div id="loginModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Log In</h4> 
      </div> 
      <div class="modal-body"> 
       <h3>Username</h3> 
       <input type="text" id="userLogin" placeholder="Username"> 
        <h3>Password</h3> 
        <input type="password" id="pwdLogin" placeholder="Password"> 
         <br> 
          <br> 
           <input type="checkbox" id="rememberMe">Remember Me 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
             <button type="button" class="btn btn-primary" id="btnLogin">Log In</button> 
            </div> 
      </div> 
     </div> 
</div> 

ここは、モーダルを発生させるスパンです。

<span id="comment"><a id="testComment" data-toggle="modal" href="#loginModal" class="btn btn-default">Add comment</a></span> 

私がスパンをクリックすると、モーダルが表示されます。 #btnLoginをクリックすると、アクションが1回、2回など繰り返されます。モーダルと対話

ジャバスクリプト（アクションはスパンクリック以内である）：

$("#testComment").click(function (event) { 
    if ($("#msg").val() == "" || $("#nombre").val() == "") { 
     alert("To send a comment fill your mail and message!"); 
     event.stopPropagation(); 
    } 
    else { 
     $("#btnLogin").click(function() { 
      alert("this also"); 
      $(this).off('shown.bs.modal'); 
      if ($("#userLogin").val() != "" && $("#pwdLogin").val() != "") { 
       var dataToSend = { 
        "action": "LOGIN" 
        , "username": $("#userLogin").val() 
        , "password": $("#pwdLogin").val() 
        , "remember": $("#rememberMe").is(":checked") 
       } 
       $.ajax({ 
        url: "data/applicationLayer.php" 
        , type: "POST" 
        , data: dataToSend 
        , dataTpe: "json" 
        , success: function (jsonData) { 
         var data = { 
          "comment": $("#msg").val() 
          , "username": $("#username").val() 
         } 
         $.ajax({ 
          url: "data/addComment.php" 
          , type: "POST" 
          , data: data 
          , dataType: "text" 
          , success: function (dataResponse) { 
           var newHTMLContent = ""; 
           newHTMLContent += "<tr><td>" + data.username + "</td>" + "<td>" + data.comment + "</td></tr>"; 
           $("#commentTable").append(newHTMLContent); 
           alert("Comment was added!"); 
          } 
          , error: function (errorMsg) { 
           alert("Error adding comment in ajax"); 
          } 
         }); 
        } 
        , error: function (errorMsg) { 
         alert("Login Error"); 
        } 
       }); 
      } 
      else { 
       alert('Missing username or password.'); 
      } 
     }); 
    } 
}); 

Answer 1

はすぐ外$("#btnLogin").clickイベントを置きます。ここに私のコードはありますかそれともあなたのお手伝いをするかもしれないリンクの下に行く。

JSFiddle

JAVSCRIPT

$("#testComment").click(function(event) { 
    if ($("#msg").val() == "" || $("#nombre").val() == "") { 
     alert("To send a comment fill your mail and message!"); 
     event.stopPropagation(); 
    } 
}); 
$("#btnLogin").click(function() { 
    alert("this also"); 
    $(this).off('shown.bs.modal'); 
    if ($("#userLogin").val() != "" && $("#pwdLogin").val() != "") { 
     var dataToSend = { 
      "action": "LOGIN", 
      "username": $("#userLogin").val(), 
      "password": $("#pwdLogin").val(), 
      "remember": $("#rememberMe").is(":checked") 
     } 
     $.ajax({ 
      url: "data/applicationLayer.php", 
      type: "POST", 
      data: dataToSend, 
      dataTpe: "json", 
      success: function(jsonData) { 
       var data = { 
        "comment": $("#msg").val(), 
        "username": $("#username").val() 
       } 
       $.ajax({ 
        url: "data/addComment.php", 
        type: "POST", 
        data: data, 
        dataType: "text", 
        success: function(dataResponse) { 
         var newHTMLContent = ""; 
         newHTMLContent += "<tr><td>" + data.username + "</td>" + "<td>" + data.comment + "</td></tr>"; 
         $("#commentTable").append(newHTMLContent); 
         alert("Comment was added!"); 
        }, 
        error: function(errorMsg) { 
         alert("Error adding comment in ajax"); 
        } 
       }); 
      }, 
      error: function(errorMsg) { 
       alert("Login Error"); 
      } 
     }); 
    } else { 
     alert('Missing username or password.'); 
    } 
});