我想使用 jQuery 对表进行实时编辑/更新/删除，但现在有两个问题
如果按 #3 到 #1 的顺序点击笔，总共点击 3 次，但为什么按 #1 到 #3 的顺序点击笔总共点击 5 次？
点击勾号图标 Action 不会触发，因为输入框 focusout
完整代码参见这里的演示 https://jsfiddle.net/hjxr7bvf/1/
html代码，循环此 block n次
<tr>
<th>1</th>
<td>
<div class="d-flex align-items-center">
<div class="flex-grow-1 mr-3">
<div data-value="1">php</div>
<input type="text" value="php" data-input="1" style="display: none;">
</div>
<a href="#" data-update="1" style="display: none;">
<i class="fas fa-check text-success"></i>
</a>
<a href="#" data-edit="1">
<i class="fas fa-pen text-info"></i>
</a>
<a href="#" data-destroy="1">
<i class="fas fa-trash-alt text-info"></i>
</a>
</div>
</td>
</tr>
脚本代码
<script type="text/javascript">
$(function() {
function tableReset() {
$('[data-update]').hide(); // hide tick icon
$('[data-input]').hide(); // hide input box
$('[data-value]').show(); // show tag name text
$('[data-edit]').show(); // show pen icon
}
// click pen icon
$('[data-edit]').click(function(e) {
e.preventDefault();
var id = $(this).data('edit');
tableReset();
$('[data-update="' + id + '"]').show(); // show tick icon by id
$('[data-input="' + id + '"]').show().focus(); // show input box by id
$('[data-value="' + id + '"]').hide(); // hide tag name text by id
$('[data-edit="' + id + '"]').hide(); // hide pen icon by id
});
// click tick icon won't fire because focusout here
// and click pen icon has problem too
$('[data-input]').focusout(function() {
var id = $(this).data('input');
var value = $('[data-value="' + id + '"]').text();
$('[data-input="' + id + '"]').val(value);
tableReset();
});
// click tick icon do Ajax update
$('[data-update]').click(function(e) {
e.preventDefault();
var id = $(this).data('update');
var input = $('[data-input="' + id + '"]').val();
$('[data-value="' + id + '"]').text(input); // set text = input val
// action for Ajax update
});
// Ajax destroy
$('[data-destroy]').click(function(e) {
e.preventDefault();
});
});
</script>
已编辑:阅读下面的答案，使用实时表格代替模态
最佳答案
散焦
当值发生变化并且失去焦点时，表单控件的适当事件是“change”。 “blur”事件适用于未经编辑而失去焦点的情况。
演示中有许多评论更改。由于没有发布 AJAX 功能(不需要，别担心)，我调整了一个实时测试服务器只是为了好玩。除以下代码外，所有更改都是可选的:
兴趣点
input.on('change blur', function(e) { var id = $(this).data('input') - 1; saveData(id); done(); });
演示
Fiddle
demo中有详细说明
注意:出于某种原因，表单没有提交到 SO 上的测试服务器，但它在 Fiddle 上
$(function() {
// All classes are stored in variables for easier use
/*
Instead of this:
> $('[data-messy="' + id + '"]');
we are using this:
> clean.eq(id);
*/
var update = $('.update');
var input = $('.input');
var value = $('.value');
var edit = $('.edit');
var destroy = $('.destroy');
function done() {
update.add(input).hide();
value.add(edit).show();
}
function editData(id) {
update.eq(id).show();
input.eq(id).show().focus();
value.eq(id).hide();
edit.eq(id).hide();
}
function saveData(id) {
var v = input.eq(id).val();
value.eq(id).text(v);
}
function deleteData(id) {
if (id === -1) {
input.val('');
value.text('');
} else {
input.eq(id).val('');
value.eq(id).text('');
}
}
edit.click(function(e) {
done();
var id = $(this).data('edit') - 1;
editData(id);
});
/*
The appropriate event for form controls that will fire when value has changed and gets unfocused is "change". "blur" event is for when it gets unfocused without an edit.
*/
input.on('change blur', function(e) {
var id = $(this).data('input') - 1;
saveData(id);
done();
});
update.on('click', function(e) {
//e.preventDefault();
var id = $(this).data('update') - 1;
saveData(id);
done();
});
destroy.click(function(e) {
var id = $(this).data('destroy') - 1;
deleteData(id);
done();
});
});/* Added so there's no jumping heights on rows when a button is toggled */
td div {
line-height: 2;
}
/* Multiple repeats of class selector will override Bootstrap styles */
button.update.update.update {
border-color: transparent;
background: none;
padding: 0;
line-height: 1
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/solid.js" integrity="sha384-GJiigN/ef2B3HMj0haY+eMmG4EIIrhWgGJ2Rv0IaWnNdWdbWPr1sRLkGz7xfjOFw" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/fontawesome.js" integrity="sha384-2OfHGv4zQZxcNK+oL8TR9pA+ADXtUODqGpIRy1zOgioC4X3+2vbOAp5Qv7uHM4Z8" crossorigin="anonymous"></script>
</head>
<body>
<!--All buttons have a class added form easier use-->
<!--All button anchor [href] attribute values are changed to href="#/" -- this prevents jumping to locations, so e.preventDefault() is no longer needed-->
<div class="container-fluid">
<div class="row">
<div class="col">
<h4>
click pen edit, click tick update
</h4>
<!--This form was added just to send to a live test server. The response is sent to the iframe located below the form-->
<form id="tags" action='https://httpbin.org/post' method='post' target='response'>
<table class="table table-bordered">
<thead>
<tr>
<!--This column never needs to expand more than its content-->
<th width='24px' scope="col">#</th>
<th class="col-sm-10" scope="col">Tag Name
<!--Destroy all button-->
<a href="#/" class='destroy float-right float-right' data-destroy="0">
<i class="fas fa-trash-alt text-info"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<!--1st column has a hidden input-->
<th scope="row">1<input name="#" value="1" type="hidden"></th>
<td>
<div class="group d-flex align-items-center">
<i class="fas fa-tag fa-fw text-success mr-3"></i>
<div class="flex-grow-1 mr-3">
<div class='value' data-value="1">php</div>
<!--Added [name="Tag Name"]-->
<input type="text" class="input form-control form-control-sm" name="Tag Name" value="php" data-input="1" style="display: none;">
</div>
<!--All update buttons are real buttons so they submit automatically-->
<button class="update mr-3" data-update="1" style="display: none;">
<i class="fas fa-check text-success"></i>
</button>
<a href="#/" class="edit mr-3" data-edit="1">
<i class="fas fa-pen text-info"></i>
</a>
<a href="#/" class='destroy' data-destroy="1">
<i class="fas fa-trash-alt text-info"></i>
</a>
</div>
</td>
</tr>
<tr>
<th scope="row">2<input name="#" value="2" type="hidden"></th>
<td>
<div class="d-flex align-items-center">
<i class="fas fa-tag fa-fw text-success mr-3"></i>
<div class="flex-grow-1 mr-3">
<div class='value' data-value="2">javascript</div>
<input type="text" class="input form-control form-control-sm" name="Tag Name" value="javascript" data-input="2" style="display: none;">
</div>
<button class="update mr-3" data-update="2" style="display: none;">
<i class="fas fa-check text-success"></i>
</button>
<a href='#/' class="edit mr-3" data-edit="2">
<i class="fas fa-pen text-info"></i>
</a>
<a href="#/" class='destroy' data-destroy="2">
<i class="fas fa-trash-alt text-info"></i>
</a>
</div>
</td>
</tr>
<tr>
<th scope="row">3<input name="#" value="3" type="hidden"></th>
<td>
<div class="group d-flex align-items-center">
<i class="fas fa-tag fa-fw text-success mr-3"></i>
<div class="flex-grow-1 mr-3">
<div class='value' data-value="3">css</div>
<input type="text" class="input form-control form-control-sm" name="Tag Name" value="css" data-input="3" style="display: none;">
</div>
<button class="update mr-3" data-update="3" style="display: none;">
<i class="fas fa-check text-success"></i>
</button>
<a href="#/" class="edit mr-3" data-edit="3">
<i class="fas fa-pen text-info"></i>
</a>
<a href="#/" class='destroy' data-destroy="3">
<i class="fas fa-trash-alt text-info"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</form>
<h5>
Test Server Response
</h5>
<iframe name='response'></iframe>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>引用资料
关于javascript - jQuery live edit table do ajax update and delete, focusout问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52570436/