jQuery Datatable 更新后将 CSS 添加到单元格

Question

在我的 jQuery 数据表中的记录更新后，我试图将 CSS 添加到单元格中。主要是为了向用户展示更新成功。

我正在使用 BLUR 事件将参数发送到处理脚本：

$('#example1').on('blur', 'tr > td > .editForecast', function(e) 
{
  e.preventDefault();
  var forecastnewval = $(this).val();

  $.post('api/inlineEditProcess.php', {forecastnewval:forecastnewval}, function(data)
  {
    changeColor(); // calling this function
    //$(this).css('background-color', 'green'); // I tried this but unsuccessful
  });
});

我正在调用这个函数：

function changeColor()
{
  $('#example1 tr > td > .editForecast').on('blur', function()
  {
    $(this).css('background-color', 'green');
  });
}

此时，用户可以进行更新。但是他们点击/单击单元格没有任何反应。该功能仅在他们单击返回单元格然后 Tab/单击它时才有效。

我知道这与当他们最初单击单元格时我已经有一个 BLUR 事件发生有关。然后该函数使用另一个 BLUR 事件，这解释了为什么他们必须单击单元格两次才能工作。

我需要它来处理第一个 BLUR 事件。

正如您将在最初的 BLUR 事件中看到的那样，我确实添加了代码来更改 $.POST 中的 CSS，但这并不成功。

我知道我不能使用 2 个 BLUR 事件，但我不确定我还能用什么来让它工作。

Answer 1

它认为最好使用event delegation来监听动态元素的事件，而不是每次都绑定事件处理程序。

您可以通过将当前值与value 属性进行比较来检查值是否已更改。

$('#example1').on('blur', 'tr > td > .editForecast', function(){
  // check value is changed or not
  if(this.value !== $(this).attr('value')){
     $(this).css('background-color', 'green');
  }
});

---

或者更好的方法是在聚焦元素的同时跟踪当前值（使用event delegation），然后与跟踪的值进行比较。

// list focus event to track the current value of element
$('#example1').on('focus', 'tr > td > .editForecast', function(){
   $(this).data('value', this.value);
})


$('#example1').on('blur', 'tr > td > .editForecast', function(){
  // compare value with the tracked value
  if(this.value !== $(this).data('value')){
     $(this).css('background-color', 'green');
  }
});

Answer 2

对于第一个事件，为什么不使用onFocus()，然后对第二个事件使用onBlur()。