javascript - 单击确定时JavaScript警报不会消失
问题描述
我在这里创建了一个 JQuery 动态表,我正在尝试实施输入检查以确保只保存数字。通过单击外部或按回车按钮来更新单元格,我想要实现的是在输入无效输入时发出警报。
'focusout' 功能警报运行良好。另一方面,“按键”功能警报的行为很奇怪,警报消息正常弹出,但是无论我单击多少次确定它都不会消失。
根据console.log(),警报以某种方式触发了“focusout”功能。但即使是这种情况,我也不明白这是如何导致错误的,因为“focusout”功能可以正常工作。我尝试在警报后使用 $(this).focus() 但这没有用。知道我可能缺少什么吗?
提前致谢
$(document).on('keypress', '.row_data', function (event) {
if (event.which === 13) {
event.preventDefault()
if (isNaN($(this).html())) {
alert("Enter valid number")
} else {
var elem = $(this)
saveValue(elem)
}
}
});
/* Saves the edited cell data when user clicks outside the cell */
$(document).on('focusout', '.row_data', function (event) {
event.preventDefault();
if (isNaN($(this).html())) {
alert("Enter valid number")
} else {
var elem = $(this)
saveValue(elem)
}
});
编辑
所以这里是我的 HMTL 上下文。我正在使用 Handlebars 创建一个表格,但基本上我所有的单元格都是这样的..
<span class="row_data" edit_type="click" col_name="col_1">{{col_1}}</span>
</td>
<td>£
<span class="row_data" edit_type="click" col_name="col_2">{{col_2}}</span>
</td>
<td>£
<span class="row_data" edit_type="click" col_name="col_3">{{col_3}}</span>
</td>
我正在使用 JQuery 使单元格像这样可编辑...
/* Makes each cell on the table editable */
$(document).on('click', '.row_data', function (event) {
event.preventDefault();
if ($(this).attr('edit_type') === 'button') {
return false;
}
$(this).closest('span').attr('contenteditable', 'true');
$(this).css("background-color", "beige").css('padding', '5px');
$(this).focus();
})
解决方案
我在下面对您的代码进行了一些更改,并对其进行了全面评论。最好尽可能不要重复代码,只维护一个函数并使用各种方法触发它,而不是必须确保分别维护两个不同的函数。
您当前正在触发alert
多次,我们可以稍微合理化代码以避免两个不同的函数触发警告。
我认为您可以使用以下方法简化事情:
$(":focus").blur();
这会将焦点从任何处于焦点的元素中移除。
我假设你.row_data
是一个input
,所以也使用.val()
了而不是.html()
,你可能需要根据你的用例将它改回来。
让我知道你是否希望得到别的东西。
// I would recommend using keyup rather than keypress
$(document).on('keyup', '.row_data', function(event) {
// Check if it is a return
if (event.which === 13) {
// Remove focus
// This will triger the function below, it'll be easier to manage a single function
$(':focus').blur();
// Prevent default
event.preventDefault()
}
});
/* Saves the edited cell data when user clicks outside the cell */
$(document).on('focusout', '.row_data', function(event) {
// Prevent default
event.preventDefault();
// Check if NaN
// Used .val() - not sure if you need to use .html in your use case
if (isNaN($(this).val())) {
// Notify user
alert("Enter valid number")
} else {
// Pass element to save
saveValue($(this))
}
});
// Test saving function
function saveValue(elem) {
// Send to console to prove it works
console.log("Saving " + elem.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="row_data">
推荐阅读
- svg - SVG 过滤和填充不适用于所有浏览器,在 Safari 中严重损坏
- javascript - 基于另一个 javascript 文件定义一个带参数的函数
- android - 如何通过单击检查所有复选框?
- python - 判断两个列表是否相互补充的最快方法?
- javascript - 革命滑块图像不起作用codeigniter
- javascript - 哪些记忆库可用于 Javascript?
- python - Tensorflow:自定义 CNN 模型精度因训练而耗尽 = False
- angular - 警告:在 output.globals 中没有为外部模块“X”提供名称——猜测是“X”
- modelica - Dymola 中的模型控制器
- python - 批次大小和每批次推理时间之间的线性关系