单击某个位置时添加事件

Question

我正在开发一个简单的管理系统。现在我想让管理员更容易编辑数据。我的目标是，当双击一个元素时，它将变为输入。然后在编辑之后，如果管理员在输入之外单击，它将运行一个事件来运行ajax。这就像PHPMyAdmin中的系统一样，当我们想要编辑数据时，只需双击数据。

HTML

<tbody>
<tr>
<th scope="row">1</th>
<td class="editable" name="email">[e-mail]</td>
<td class="editable" name="username">this_is_username</td>
<td class="editable" name="name">My Name</td>
</tr>
</tbody>

JavaScript

$(".editable").dblclick(function () {
const id = $(this).data("id");
const col = $(this).attr("name");
$(this).html(
"<form>
<input class="editing" type='text' value='" + $(this).val() + "'>
</form>"
);
});
// I want this Ajax will execute whene other side is clicked
$.ajax({
url: "http://localhost/myProject/myController/myMethod",
type: "post",
data: {
id: id,
col: col,
value: $('.editing').val()
},
success: function () {
document.location.href = "http://localhost/myProject/myController";
},
});

控制器

public function myMethod()
{
$id = $this->input->post("id");
$col = $this->input->post("col");
$value = $this->input->post("value");
$this->db->set($col, $val);
$this->db->where('id', $id);
$this->db->update("my_table");
}

但我不知道当管理员在输入之外点击时，如何创建一个执行Ajax的事件。有人能帮我吗？还是有功能做了？

***注意：我想在标记锚上排除它。因此，当按下某个链接时，它不会执行Ajax，而是转到该链接。

Answer 1

使用输入元素的onblur事件。当用户将焦点从输入字段移开时，它将启动。

Answer 2

由于您使用的是jQuery，请勾选onblur事件，如下所示：

$(".editable").dblclick(function () {
const id = $(this).data("id");
const col = $(this).attr("name");
$(this).html(
"<form>
<input class="editing" type='text' value='" + $(this).val() + "'>
</form>"
);

// use more specific targets here, i just use the class of the input
// you should use the same $(this) content in the end
$('.editing').blur(function() {
$.ajax({
url: "http://localhost/myProject/myController/myMethod",
type: "post",
data: {
id: id,
col: col,
value: $('.editing').val()
},
success: function () {
document.location.href = "http://localhost/myProject/myController";
},
});
});

});

当附加模糊事件的元素失去焦点时，会触发模糊事件，但不会通过冒泡触发，仅针对特定元素。

查找模糊的更多信息或可能的focusOut