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，通过整洁布局）：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

您定位的是什么ID？因为如果我将$("#" + AJAX_ID)替换为$('table')，则可以使用＆gt; demo（至少在Chrome中）

如果我将函数包装在$(document).ready(function(){...})内，则可以在IE中使用 - ＆gt; demo

我仍然希望看到问题所在，但到目前为止我对您的代码有一些评论。

我没有对此进行过测试，但是我创建了一个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);

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

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

缩短为：

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

除了在每行添加后调用此函数，您可以尝试添加一个live函数，该函数适用于动态添加的内容：
```
$(oLigne).find("input").blur(function() { onBlurLecture(oLigne); });
```
尝试在初始化脚本时运行它（只需一次）
```
$('#lecture').find('input').live('blur', function(){
 onBlurLecture( $(this).closest('tr') );
})
```

我会继续寻找！

Answer 2

编辑：

如果您的代码是通过某个具有默认行为的元素（例如<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 3

得到了它！

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

Chrome：正常工作 Firefox：工作
IE8：有效（有修复）

在lol上度过了一天半的时间

谢谢大家！

Answer 4

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

当orher属性起作用时，.focus（）对输入不起作用

4 个答案: