JQuery中focusout触发.newTask点击失效问题求助

1. 确保事件委托正确绑定

   • 由于.last是AJAX动态添加的输入框，必须用事件委托绑定focusout事件，不能直接绑定到动态元素上：

     $(document).on('focusout', '.last', function() {
       // 定位当前输入框所属的表格
       const targetTable = $(this).closest('table');
       // 找到该表格内的.newTask元素
       const newTaskBtn = targetTable.find('.newTask');
       // 触发点击事件
       newTaskBtn.trigger('click');
     });
     

   • 如果.newTask也是动态生成的元素，它的点击事件同样需要用委托绑定：

     $(document).on('click', '.newTask', function() {
       const currentTable = $(this).closest('table');
       // 你的AJAX新增行逻辑
       $.ajax({
         url: '你的接口地址',
         method: 'POST/GET',
         success: function(res) {
           // 向表格tbody添加带.last输入框的行
           currentTable.find('tbody').append(`<tr><td><input type="text" class="last"></td></tr>`);
         }
       });
     });
     

2. 调试定位元素是否存在
   在focusout事件中添加调试代码，确认是否正确找到目标元素：

   $(document).on('focusout', '.last', function() {
     const targetTable = $(this).closest('table');
     const newTaskBtn = targetTable.find('.newTask');
     console.log('当前表格：', targetTable);
     console.log('.newTask元素数量：', newTaskBtn.length);
     if (newTaskBtn.length === 0) {
       console.error('未找到对应表格的.newTask元素，请检查DOM结构');
     } else {
       newTaskBtn.trigger('click');
     }
   });
   

   如果打印的.newTask数量为0，说明你的DOM结构中.newTask不在当前表格内，需要调整选择器（比如找最近的包含表格和.newTask的父容器，再通过容器找.newTask）。

3. 检查事件绑定时机
   确保所有事件绑定代码都在DOM ready回调中执行，避免DOM未加载完成就绑定事件：

   $(document).ready(function() {
     // 这里放所有事件绑定代码
     $(document).on('click', '.newTask', function() { /* ... */ });
     $(document).on('focusout', '.last', function() { /* ... */ });
   });
   

4. 排除事件阻止问题
   如果.newTask的点击事件中使用了e.stopPropagation()或e.preventDefault()，不会影响trigger('click')触发事件处理函数，但如果是通过原生addEventListener绑定的事件，jQuery的trigger可能无法触发，此时可以改用原生点击：

   // 改用原生DOM方法触发点击
   newTaskBtn[0].click();
   

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