javascript - Bootstrap 模式启动递增时间

Question

Bootstrap Modal 会触发一次操作，如果我再次单击，它将触发两次，依此类推。

<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，然后该操作会启动一次、两次，依此类推。

与模态交互的 JavaScript(操作在跨度单击内):

$("#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.');
    }
});