JavaScript 单击确定时警报不会消失

Question

我在这里创建了一个 JQuery 动态 table，我正在尝试执行输入检查以确保只保存数字。通过单击单元格外部或按回车按钮更新单元格，我想要实现的是在输入无效输入时发出警报。

'focusout' 警报功能运行良好。另一方面，'keypress' 功能警报表现异常，警报消息正常弹出，但无论我点击多少次“确定”，它都不会消失。

根据 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)
  }
});

编辑

这是我的 HTML 上下文。我正在使用 Handlebars 创建一个 table 但基本上我所有的单元格都是这样的..

      <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 使单元格 editable 像这样...

/* 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();
})

Answer 1

您好，HTML 在这里将有助于提出更好的解决方案，但简单的猜测是您正在使用事件创建循环。

您说按键事件是问题所在，只是为了测试目的，您是否尝试将按键更改为 keydown/keyUp。

我还建议将警报更改为 console.log，以便于调试。

Answer 2

我在下面对您的代码进行了一些更改并对其进行了全面评论。最好尽可能不要重复代码，只维护一个函数并使用各种方法触发它，而不必确保分别维护两个不同的函数。

您目前正在多次触发您的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">

JavaScript 单击确定时警报不会消失

JavaScript Alert not disappearing when ok is clicked

javascript

jquery

alert