我有一个简单的编辑表单，它允许我更改选择列表中显示的一组数据库记录的文本属性；但是，该功能只能工作一次。第一次编辑保存会成功更改一条记录；但第二次编辑完成时，更改不会保存。使用 bind() 将编辑和保存事件附加到按钮。（我对 jQuery 还很陌生，所以还不太了解它的微妙之处。）
似乎禁用按钮似乎解除了附加到按钮的功能；但我无法从 jQuery 文档中破译它。
这是jQuery代码：
var is_new = 0;
$(document).ready(function()
{
//refresh_studynames(); ...if we get this working, use?
$('#editbtn').bind('click',pop_studyname);
$('#newbtn').bind('click',new_studyname);
$('#savebtn').bind('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').bind('click',cancel_studyname);
// enable the Save button
$('#savebtn').attr('disabled',false);
// and bind it to a function
$('#savebtn').bind('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').bind('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').bind('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);
}
function save_studyname()
{
// Are we saving a new or existing Study?
if (is_new == 1) {
$.ajax({
type: 'POST',
URL: "saveStudyName.php",
data: {'type': 'new', 'studyname': $('#edit_field').val()},
success: function(resultmsg) {
console.log(resultmsg);
alert(resultmsg);
},
error: function() {
console.log(resultmsg);
alert('We have a problem, Huston...');
}
});
// 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();
//alert('option selected:'+$('#edit_field').val()+'option value:'+styndx);
$.post("saveStudyName.php", {'type': 'update', 'studyname':studyname, 'styndx':styndx},
function(resultmsg) {
// clear the edit field
$('#edit_field').val('');
// disable the Save button
$('#savebtn').attr('disabled',true);
// notify user
//alert(resultmsg);
});
}
// refresh the picklist
refresh_studynames();
// Enable the Edit button.
$('#editbtn').attr('disabled',false);
}
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) //on recieve of reply
{
var $studylist = $('#studylist').empty();
$.each(data, function(i, record) {
$studylist.append($("<option/>", {
value: record.studyindex,
text: record.studyname
}));
});
}
});
}
这是它引用的 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>
非常感谢任何帮助！