jQuery/Ajax 请求被发送两次

Question

I've been scanning my code over and over again but I can't seem to find the problem.我一遍又一遍地扫描我的代码，但似乎找不到问题所在。 When I click the link #add-user-btn the file actions.php is called twice (and hence the PHP script is executed twice).当我单击链接#add-user-btn ，文件actions.php被调用两次（因此 PHP 脚本被执行两次）。

Here's the script: I suppose it has something to do with the javascript in front of the ajax request?这是脚本：我想它与ajax请求前面的javascript有关吗？

$(function () {
    $("#add-user-btn").click(function (e) {
        e.preventDefault();
        var email = $("#email").val();
        var name = $("#name").val();
        var action = "adduser";

        $.ajax({
            url: '../actions.php',
            type: 'POST',
            data: {
                action: action,
                email: email,
                name: name,
            },
            dataType: 'json',
            success: function (data) {
                $(".close-reveal-modal").click();
            }
        });
    });
});

The HTML: HTML：

<div id="adduser" class="reveal-modal">
 <h1>Add new user</h1>
 <p><label for="email">E-mail:</label> <input id="email" name="email" type="text" placeholder="name@example.com" /></p>
 <p><label for="name">Name:</label> <input id="name" name="name" type="text" placeholder="Adam Smith"/></p>
 <p><label for="password">Password:</label> <input id="password" name="password" type="password" placeholder="123456" /></p>
 <p>
 <label for="authorization">Authorization:</label> 
 <select id="authorization" name="authorization">
    <option value="0">Administrator</option>
    <option value="1">Superuser</option>
    <option value="2">User</option>
 </select>     
 </p>
 <button id="add-user-btn">Submit</button>
 <a class="close-reveal-modal">&#215;</a>
 </div>

Answer 1

Try尝试

$("#add-user-btn").unbind('click').bind('click', function () { });

This will ensure the click event only gets called once.这将确保点击事件只被调用一次。

Answer 2

When I worked with an specific website that I only had access to my javascript, I got this kind of error too.当我使用一个我只能访问我的 javascript 的特定网站时，我也遇到了这种错误。 The problem was that there was lots of $(function() and $(document).ready in other codes.问题是其他代码中有很多 $(function() 和 $(document).ready 。

what you can do to prevent this, if you can't correct the core problem is:如果您不能纠正核心问题，您可以采取什么措施来防止这种情况发生：

var preventRunDefault;
$(function () {
    if(!preventRunDefault) {
    preventRunDefault = true;
    $("#add-user-btn").click(function (e) {
        e.preventDefault();
        var email = $("#email").val();
        var name = $("#name").val();
        var action = "adduser";

        $.ajax({
            url: '../actions.php',
            type: 'POST',
            data: {
                action: action,
                email: email,
                name: name,
            },
            dataType: 'json',
            success: function (data) {
                $(".close-reveal-modal").click();
            }
        });
    });
   }
});

But the right way is to search the cause and don't do workarounds.但正确的方法是寻找原因，而不是采取变通办法。

Answer 3

This problem also occurs when you include multiple times the same JavaScript file in your HTML file.当您在 HTML 文件中多次包含相同的 JavaScript 文件时，也会出现此问题。

<html>
    <head>
        <script src="utility.js"></script>
        <script src="utility.js"></script>
    </head>

jQuery/Ajax 请求被发送两次

问题描述

3 个解决方案

解决方案1
16 已采纳 2013-07-25 19:25:30

解决方案2
1 2013-07-25 19:48:32

解决方案3
1 2021-06-06 17:07:35

jQuery/Ajax 请求被发送两次

问题描述

3 个解决方案

解决方案1 16 已采纳 2013-07-25 19:25:30

解决方案2 1 2013-07-25 19:48:32

解决方案3 1 2021-06-06 17:07:35

解决方案1
16 已采纳 2013-07-25 19:25:30

解决方案2
1 2013-07-25 19:48:32

解决方案3
1 2021-06-06 17:07:35