Laravel Datatables实现按Enter键触发Ajax请求问题

你遇到的核心问题是**myFunction里的this指向错误**——当你通过onkeydown="myFunction(event)"直接调用函数时，函数内部的this默认指向window对象，而不是触发事件的input元素，所以你拿不到data-id和输入框的值，自然Ajax请求无法正常触发。而blur/focusout能正常工作，是因为这类事件的绑定方式默认会把元素本身作为上下文。

下面给你两种可行的修复方案：

方案一：修改函数调用时传入当前元素 #

直接在onkeydown里把当前input元素传给函数，明确指定上下文：

修改Datatable的mRender代码： #

{
  data: 'vendor_name', 
  name: 'vendors.vendor_name',
  mRender: function (data, type, row) { 
    return '<input type="text" id="vendor_name" class="vendor_name" data-id="'+row.id+'" onkeydown="myFunction(event, this)" onClick="this.select();" value="'+data+'">';
  }
}

对应的JavaScript函数修改： #

<script type="text/javascript">
function myFunction(event, element) {
  var x = event.keyCode;
  // 现在用传入的element代替this，直接获取当前输入框的上下文
  var id = $(element).data("id");
  var $row = $(element).closest('tr');
  if (x == 13) {
    $.ajax({
      type: 'POST',
      url: 'Vendor_Save',
      data: {
        '_token': $('input[name=_token]').val(),
        'currentid': id,
        'current_vendor_name': $(element).val(),
      },
      success: function(data) {
        $row.find('.category_name').val(data.categoryname);
        $row.find('.vendor_no').val(data.vendorid);
      }
    });
  }
};
</script>

方案二：使用事件委托（更推荐，符合现代JS实践） #

放弃内联事件绑定，用jQuery的事件委托来绑定keydown事件，这样能彻底避免上下文问题，还能修复HTML规范问题：

第一步：修改Datatable的mRender，去掉内联onkeydown与重复id： #

{
  data: 'vendor_name', 
  name: 'vendors.vendor_name',
  mRender: function (data, type, row) { 
    // 去掉重复的id="vendor_name"——Datatable渲染后会生成多个相同id的元素，违反HTML规范
    return '<input type="text" class="vendor_name" data-id="'+row.id+'" onClick="this.select();" value="'+data+'">';
  }
}

第二步：绑定事件委托的JavaScript代码： #

<script type="text/javascript">
// 给页面上所有.vendor_name元素绑定keydown事件，动态生成的元素也能生效
$(document).on('keydown', '.vendor_name', function(event) {
  // 推荐用event.key替代keyCode，keyCode已被废弃，兼容性更好
  if (event.key === 'Enter') {
    // 阻止Enter的默认行为（比如表单提交、页面跳转）
    event.preventDefault();
    
    var id = $(this).data("id");
    var $row = $(this).closest('tr');
    
    $.ajax({
      type: 'POST',
      url: 'Vendor_Save',
      data: {
        '_token': $('input[name=_token]').val(),
        'currentid': id,
        'current_vendor_name': $(this).val(),
      },
      success: function(data) {
        $row.find('.category_name').val(data.categoryname);
        $row.find('.vendor_no').val(data.vendorid);
      }
    });
  }
});
</script>

这个方案的优势：

• 彻底解决上下文指向问题
• 修复了重复id的HTML规范问题
• 动态生成的Datatable行也能自动绑定事件，无需额外处理
• 事件逻辑集中管理，更易于调试和维护

内容的提问来源于stack exchange，提问作者user8872543