属性不起作用时，.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，通过整洁的布局）： http : //pastebin.com/PHqxAEVm

*编辑2 *

甚至$("#lectures").find("input:last").focus(); 从ajax回调调用不会执行任何操作。 $("#lectures").find("input:last").css('background-color', 'red'); 虽然变成红色，但是焦点转到了地址栏。

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

*编辑3 *

下面是建立表中的javascript代码： http://pastebin.com/cbCfi0UY在页面加载， oContainer是$("#lectures")而AJAX后调用它的$("#" + AJAX_ID).parent()应该指向桌子的躯干

*编辑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 : batisses我缩短了batisses变量。 （完整）页面没有javascript错误。 在chrome的javascript控制台中，我无法集中输入。

*编辑6 *

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

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

Answer 1

您定位的是什么ID？ 因为如果我将$("#" + AJAX_ID)替换$('table')则可以正常运行-> 演示 （至少在Chrome中）

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

---

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

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 2

编辑：

如果您的代码是通过具有默认行为的某个元素（例如<a>元素）触发的，请尝试添加return false; <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

得到它了！

在写入它们时，我使用“制表符”（制表符）切换到下一个输入。 在最后一个焦点上，焦点超出了窗口，因此无法设置它。 我将最后一列“状态”转换为input以便在执行onBlur时获得焦点。 调用ajax load回调时，将添加新行，并根据需要对输入进行聚焦。

铬：作品
Firefox：有效
IE8：有效（已修复）

在那个哈哈上度过了1½天

感谢大家！

Answer 4

尝试触发.focusin() （在jQuery 1.4中添加）。 请参见文档 。