以下jQuery代码按预期工作(代码中的每个注释),基本上它的作用是
这是相关的jQuery:
// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {
// When the following is commented out, the inputs work
// If this block of code isn't commented, none of the rows inputs are editable
// First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
if ($(this).find('input').length > 0) {
// Row has textboxes
var county = $(this).find('#txtEditCounty').val(),
state = $(this).find('#txtEditState').val(),
zips = $(this).find('#txtEditZips').val(),
$td = $(this).find('td');
// Clear the cells first
$td.html('');
// Put the populated labels back in
$(this).find('.countyCovered').text(county);
$(this).find('.stateCovered').text(state);
$(this).find('.zipsCovered').text(zips);
}
});
// Only run this if there aren't already textboxes in the current row
if ($(this).find('input').length === 0) {
// Get the values of the cells before the row is cleared
var county = $(this).find('td.countyCovered').text(),
state = $(this).find('td.stateCovered').text(),
zips = $(this).find('td.zipsCovered').text();
// Clear the text from the selected row
$(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');
// Add textboxes to the cells populated with their respective values
$(this).find('td.countyCovered').append('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
'<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
'<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />');
$(this).find('td.stateCovered').append('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
$(this).find('td.zipsCovered').append('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');
// Size the textarea to its contents
$('#txtEditZips').flexible();
}
return false;
});
正如我所说,上述功能按预期工作,但是当单击行中的一个输入时,编辑光标会立即消失(就好像焦点会立即从输入中移除)。但是当我注释掉第一个代码块(在代码中注明)时,输入变得可以按预期编辑。
我为此设置了jsFiddle。
答案 0 :(得分:1)
DEMO:http://jsfiddle.net/nHgXf/2/
更改了Javascript:
var editting = false;
// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {
if(!editting)
{
editting = true;
// When the following is commented out, the inputs work
// If this block of code isn't commented, none of the rows inputs are editable
// First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
if ($(this).find('input').length > 0) {
// Row has textboxes
var county = $(this).find('#txtEditCounty').val(),
state = $(this).find('#txtEditState').val(),
zips = $(this).find('#txtEditZips').val(),
$td = $(this).find('td');
// Clear the cells first
$td.html('');
// Put the populated labels back in
$(this).find('.countyCovered').text(county);
$(this).find('.stateCovered').text(state);
$(this).find('.zipsCovered').text(zips);
}
});
// Only run this if there aren't already textboxes in the current row
if ($(this).find('input').length === 0) {
// Get the values of the cells before the row is cleared
var county = $(this).find('td.countyCovered').text(),
state = $(this).find('td.stateCovered').text(),
zips = $(this).find('td.zipsCovered').text();
// Clear the text from the selected row
$(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');
// Add textboxes to the cells populated with their respective values
$(this).find('td.countyCovered').html('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
'<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
'<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />');
$(this).find('td.stateCovered').html('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
$(this).find('td.zipsCovered').html('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');
// Size the textarea to its contents
$('#txtEditZips').flexible();
}
}
editting =false;
return false;
});
基本上因为你绑定了click事件,它不断地使所有的javascript发生,并导致DOM和选择问题