jQuery/Ajax request is being sent twice
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).
Here's the script: I suppose it has something to do with the javascript in front of the ajax request?
$(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:
<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">×</a>
</div>
3 answers
solution1
16 ACCPTED 2013-07-25 19:25:30
Try
$("#add-user-btn").unbind('click').bind('click', function () { });
This will ensure the click event only gets called once.
solution2
1 2013-07-25 19:48:32
When I worked with an specific website that I only had access to my javascript, I got this kind of error too. The problem was that there was lots of $(function() and $(document).ready in other codes.
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.
solution3
1 2021-06-06 17:07:35
This problem also occurs when you include multiple times the same JavaScript file in your HTML file.
<html>
<head>
<script src="utility.js"></script>
<script src="utility.js"></script>
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.