在查看其他SO帖子后,我没有找到我的问题的答案 - 但显然这种类型的问题发生在其他人身上,而不是我的问题。但是ajax .post函数被调用了两次,但我不太明白为什么。
这是jQuery 1.8.0,使用Firefox(Iceweasel)浏览器。
这是我的jquery代码,它将函数附加到四个按钮,编辑,保存,新建,取消。还有一个填充选择列表的功能:
var is_new = 0;
$(document).ready(function()
{
// Attach event handlers to buttons
$('#editbtn').on('click',pop_studyname);
$('#newbtn').on('click',new_studyname);
$('#savebtn').on('click',save_studyname);
// disable the Save button until we have something to save
$('#savebtn').attr('disabled',true);
// disable the Cancel button until we have something to cancel
$('#cancelbtn').attr('disabled',true);
});
function pop_studyname()
{
// pop the selected studyname into edit box.
$('#edit_field').val($('#studylist :selected').text());
// disable the New Study button
$('#newbtn').attr('disabled',true);
// enable the Cancel button
$('#cancelbtn').attr('disabled',false);
// and bind it to a function
$('#cancelbtn').on('click',cancel_studyname);
// enable the Save button
$('#savebtn').attr('disabled',false);
// and bind it to a function
$('#savebtn').on('click',save_studyname);
}
function new_studyname()
{
// clear edit box.
$('#edit_field').val('');
/**************************/
/* set flag for New Study */
is_new = 1;
/**************************/
// Enable the Cancel button
$('#cancelbtn').attr('disabled',false);
// and bind it to a function.
$('#cancelbtn').on('click',cancel_studyname);
// Disable the Edit button.
$('#editbtn').attr('disabled',true);
// Enable the Save button
$('#savebtn').attr('disabled',false);
// and bind it to a function.
$('#savebtn').on('click',save_studyname);
// put the cursor in the edit box
$('#edit_field').focus();
}
function cancel_studyname()
{
// clear edit box.
$('#edit_field').val('');
// disable cancel button.
$('#cancelbtn').attr('disabled',true);
// disable Save button.
$('#savebtn').attr('disabled',true);
// Enable the Edit button.
$('#editbtn').attr('disabled',false);
// And the New Study button.
$('#newbtn').attr('disabled',false);
// Reset new study trigger variable.
is_new = 0;
}
function save_studyname()
{
// Are we saving a new or existing Study?
if (is_new == 1) {
$.post("saveStudyName.php",
{'type': 'new', 'studyname': $('#edit_field').val()},
function(resultmsg) {
alert(resultmsg);
}
);
// reset the trigger flag
is_new = 0;
} else {
// Update an existing Study.
// Get the record index and edited study name.
var styndx = $('#studylist option:selected').val();
var studyname = $('#edit_field').val();
// Use ajax post call to update database.
$.post("saveStudyName.php",
{'type': 'update', 'studyname':studyname, 'styndx':styndx},
function(resultmsg) {
alert(resultmsg);
});
}
// clear the edit field
$('#edit_field').val('');
// disable the Save button
$('#savebtn').attr('disabled',true);
// Enable the Edit button.
$('#editbtn').attr('disabled',false);
// Enable the New Study button.
$('#newbtn').attr('disabled',false);
// Finally, refresh the studyname picklist.
refresh_studynames();
}
function refresh_studynames()
{
// repopulate studylist with update from database...
// - form the query.
// - send to database, get the result.
// - use the result to repopulate the Study name select list.
$.ajax({
url: 'getStudyNames.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php
//for example "id=5&parent=6"
dataType: 'json', //data format
error: function() {
alert('Refresh of study names failed.');
},
success: function(data)
{
var $studylist = $('#studylist').empty();
$.each(data, function(i, record) {
$studylist.append($("<option/>", {
value: record.studyindex,
text: record.studyname
}));
});
}
});
}
查看Web控制台和调试器,我可以看到两个POST(to saveStudyName.php)和两个GET(来自getStudyNames.php)正在发生,彼此之间只有几毫秒。第一个电话是正确的;但第二个不应该发生。由于涉及的逻辑,第二次调用中的参数不正确并且失败。
为完整起见,这是HTML代码:
<body >
<div id="container">
<div id="header">
<h1>Admin Module</h1>
</div>
<div id="navigation">
<ul>
<li><a href="AdminMenu.php">Admin Menu</a></li>
<li><a href="../DNAPortal/DNA_Portal_Menu.php">DNA Portal</a></li>
<li><a href='../DNAPortal/logout.php'>Logout</a></li>>
</ul>
</div>
<div id="content">
<h2>IBG Study Maintenance</h2>
<p>
<form name="StudySelection" action="process_StudyMaint.php" method="POST" onsubmit="return false" >
<input type=hidden name=studyindex>
<div id=content-container2>
<fieldset>
<LEGEND><b>Select Study &/or action</b></LEGEND>
<p>
<P CLASS=select_header>List of Studies<br>
<SELECT multiple size=15 NAME="studylist" ID="studylist" STYLE="width: 150px">
<?php
$i=0;
while ($i < $numstudies) {
$styarr = pg_fetch_row($studyresult);
echo "<option value=$styarr[0]>$styarr[1]\n";
$i++;
}
?>
</select>
</p>
</fieldset>
</div>
<div >
</div>
<div class="lower_block">
Study name:<br>
<input id="edit_field" type="text" size=30>
<input type="button" name="editbtn" id="editbtn" value="Edit" sclass="btn">
<input type="button" name="savebtn" id="savebtn" value="Save" sclass="btn">
<input type="button" name="newbtn" id="newbtn" value="New Study" sclass="btn">
<input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" sclass="btn" disabled=TRUE >
</div>
</div>
</div>
</form>
</body>
有没有办法阻止第二次通话?我看不出为什么会发生这种情况。
任何帮助非常感谢!太棒了!
- rixter
答案 0 :(得分:3)
如果您在保存之前点击编辑或新建,那么它会被调用两次,因为您这么说了。
加载页面后,请致电:$('#savebtn').on('click',save_studyname);
pop_studyname()
和new_studyname()
按钮上的回调函数Edit
和New
包含相同的行。
如果你为同一个活动做多个.on()
,你会收到多个电话。你需要确保它只被调用一次。
答案 1 :(得分:0)
请试试这个,它对我有用......
$(this).unbind();