.focus() 对输入不起作用，而其他属性起作用

Question

我有一个经典的table / thead / tbody 结构，我在 tbody 的末尾添加了一行。该行仅包含一个input 元素。该代码适用于 Firefox 3.6，但不适用于 Chrome v5 或 IE8。我正在使用 jQuery 1.4.2。

不起作用： $("#" + AJAX_ID).parent().find('tr:last > td:nth-child(2) > input').focus();

有效： $("#" + AJAX_ID).parent().find('tr:last > td:nth-child(2) > input').css('background-color', 'red');

即使在输入上设置 ID 并使用 document.getElementBuId('id').focus() 也不起作用。

谢谢！

* 编辑 *

该网站非常复杂（模板/静态 html 和动态 html 的混合），但表格 看起来像这样（在 chrome 中呈现 html，通过 tidy 布局）：http://pastebin.com/PHqxAEVm

* 编辑 2 *

即使是从 ajax 回调调用的 $("#lectures").find("input:last").focus(); 也不会做任何事情。$("#lectures").find("input:last").css('background-color', 'red'); 虽然会变成红色，但焦点会转到地址栏。

这是从选择器返回的对象的转储： http://pastebin.com/Jdw1TZXf

* 编辑 3 *

这是构建表格的 javascript 代码：http://pastebin.com/cbCfi0UY 在页面加载时，oContainer 是 $("#lectures")，而在 ajax 调用之后它是 $("#" + AJAX_ID).parent()，它应该指向表的 tbody

* 编辑 4 *

难题...这是完整的lectures.js 文件：http://pastebin.com/Jkg0DZqa batisses 和 compteurs 是通过模板加载的 json 对象。用户选择batisse，然后选择compteur，然后按下调用buildAjout()的按钮，在本例中调用buildElectric($("#lectures"), compteur);。一旦用户填写了该行，就会调用onBlurLecture(tr_parent)，通过AJAX将数据发送到服务器，并在ajax调用完成后调用function callback_compteurs_lecture_add(AJAX_ID)。函数SendCommand是一个使用jquery ajax的自定义函数。

第一个输入行（和焦点）的创建有效，但不是在 ajax 回调中创建的那个。

* 编辑 5 *

完整呈现的页面如下所示：http://pastebin.com/UfBYcjX3 我缩短了batisses 变量。 （完整）页面没有 javascript 错误。 在 chrome 的 javascript 控制台中，我无法集中输入。

* 编辑 6 *

SendCommand 在这个问题中的函数名称错误。固定。

找到的解决方案： http://bit.ly/bHd6nH

Answer 1

知道了！

我在写入时使用“制表符”（制表）切换到下一个输入。在最后一个，焦点离开了窗口，所以我无法设置它。我将最后一列“状态”转换为input，以便在执行onBlur 时获得焦点。调用 ajax 加载回调时，会添加新行并按应有的方式聚焦输入。

Chrome：有效
火狐：工作
IE8：工作（有修复）

在上面花了 1.5 天，哈哈

谢谢大家！

Answer 2

您的目标是什么 ID？因为如果我用$('table') 替换$("#" + AJAX_ID) 它可以工作-> demo（至少在Chrome 中）

如果我将函数包装在 $(document).ready(function(){...}) 中，它可以在 IE 中运行 -> demo

---

我仍在寻找问题可能是什么，但到目前为止我对您的代码有一些 cmet。

1. 我没有对此进行测试，但我创建了一个 jQuery 对象，然后在其中附加另一个对象，由于函数调用的数量，最终会花费大量时间。我发现只构建一个字符串并且只使用一个追加更容易。这个例子很容易阅读：

   var table = '\
    <table style="width: 100%">\
     <thead>\
      <tr>\
       <th>Numéro</th>\
       <th>litre</th>\
       <th style='width: 100px;'>Status</th>\
      </tr>';
   
   // append more to the string
   table += '<tbody>.....</tbody></table>';
   $('body').append(table);
   

2. 我找到了这段代码，我只是想告诉你你可以缩短它：

   $("#no_batisse").css('display', 'none');
   $("#lectures").html("");
   $("#lectures").css('display', '');
   

   缩短为：

   $("#no_batisse").hide();
   $("#lectures").empty().hide();
   

3. 您可以尝试添加一个live 函数，而不是在每行添加后调用此函数：

   $(oLigne).find("input").blur(function() { onBlurLecture(oLigne); });
   

   在初始化脚本时尝试运行它（仅一次）

   $('#lecture').find('input').live('blur', function(){
    onBlurLecture( $(this).closest('tr') );
   })
   

我会继续寻找！

Answer 3

编辑：

如果您的代码是通过某些具有默认行为的元素（如<a> 元素）触发的，请尝试将return false; 添加到其回调的末尾。

或者，如果你给事件处理函数一个参数，比如function(e) {...}，你可以在回调中调用e.preventDefault()而不是return false;。

---

首先，我不知道这是否是问题所在，但 ID 不能以数字开头。

其次，哪个元素有你使用的 AJAX ID？你会得到不同的结果。

为避免任何 ID 问题，您可以这样做：

$("#lectures").find('tr:last > td:nth-child(2) > input').focus();

或者如果您希望它是相对的，请执行以下操作：

$("#" + AJAX_ID).closest('tbody').find('tr:last > td:nth-child(2) > input').focus();

Answer 4

尝试触发.focusin()（这是在jQuery的1.4中添加的）See documentation。