Question

我正在尝试在更新jQuery Datatable中的记录后将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');
  });
}

此时，用户可以进行更新。但他们选中/单击关闭单元格没有任何反应。该功能仅在单击回到单元格然后选项卡/单击它时才有效。

我知道这与我们最初点击进入单元格时已经有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（）进行第二个事件。

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

2 个答案: