通过javascript自动对焦新添加的元素 [英] Autofocusing on a newly added element via javascript

问题描述

这个应该很简单，但是我不能让它起作用，所以很感谢任何指针。

我有一个函数在我的这是一个非常基本的POST，看起来像这样...

  $。post（url，{
 newRow：newRow 
}，function（data）{
 $（'＃'+ tableName +'> tbody> tr'）。eq （数据）; 
}）。done（function（）{
 reNumberTableIDName（$ tb）
}）; 
  

reNumberTableIDName函数非常简单，它贯穿表中的所有对象并更改它们的id /名称，以便它们的顺序与表中出于其他原因的行相关。

现在，添加到此表中的一个元素是自动完成的输入，看起来像这样...

 < input id =autoLook [9]class =required yui-ac -inputtype =texttitle =value =name =autoLook [9] .idstyle =width：500pxautocomplete =offrequired =required> 
  

请注意，名称和ID不会作为reNumberTableIDName的一部分进行更改功能。

我试着在帖子的完成部分添加一行，然后将焦点/克拉放入新输入中，但不起作用

  $（＃autoLook [+（newRow -1） +]）。focus（）; 
  

我检查了一个提示＃autoLook [+（ newRow -1）+]确实会出现正确的字符串，所以我不知道为什么这不起作用。我错过了什么显而易见的问题？

值得注意的是，我尝试在自动对焦属性中添加要添加的输入，但我正在使用grails和这种自动完成不允许我这样做。

谢谢！

值得注意的是，解决方案应该是使用下面提到的setTimeout，否则它会不断地把焦点放回对象！

解决方案选择器 #autoLook [9] 匹配一个id autoLook 和属性 9 ;这显然是错误的。

  $（＃autoLook\\ [+（newRow  -  1 ）+\\）。focus（）; 
  

来自 jQuery文档：选择器：

要使用任何元字符（例如
！＃$％&'（）* +，。/：;< =>？@ [\] ^``{|}〜 \\ 。例如，带有 id =foo.bar 的
元素可以使用选择器 $（＃foo \\.bar） 的一整套规则有效的CSS选择器，Mathias Bynens的博客条目
也可用于标识符的CSS字符转义序列。

This should be simple but I can't get it to work so would appreciate any pointers.

I have a function in my webpage that adds a new line into a table with inputs etc. This is a pretty basic POST that looks something like this...

$.post(url, {
    newRow : newRow
}, function(data) {
    $('#' + tableName + ' > tbody > tr').eq(rowLoc).before(data);
}).done(function() {
    reNumberTableIDName($tb)
});

The reNumberTableIDName function is pretty straightforward, it runs through all the objects in the table and changes their id/name so that they are in order relevant to the row they are in the table for other reasons.

Now, one of the elements added in to this table is an auto complete input which looks like so...

<input id="autoLook[9]" class="required yui-ac-input" type="text" title="" value="" name="autoLook[9].id" style="width:500px" autocomplete="off" required="required">

Note that the name and ID are not altered as part of the reNumberTableIDName function.

I tried adding in a line to the "done"portion of the post to then put the focus/carat into that new input but it doesn't work (focus stays on the button previously clicked to add the row).

$("#autoLook[" + (newRow -1) + "]").focus();

I've checked with an alert that "#autoLook[" + (newRow -1) + "]" does indeed come up with the right string so I'm at a loss as to why this doesn't work. What obvious litle gotcha am I missing?

Its also worth noting that I tried to add in a autofocus property to the input being added, but I'm working in grails and this type of auto complete doesn't allow me to do this.

Thanks!

Worth noting that the solution should be to use setTimeout as mentioned below else it will continually put focus back to the object!

解决方案

The selector #autoLook[9] matches an element with the id autoLook and the attribute 9; which is obviously wrong. Add backslashes around the square brackets to escape them:

$("#autoLook\\[" + (newRow - 1) + "\\]").focus();

Quote from jQuery Documentation: Selectors:

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^``{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

这篇关于通过javascript自动对焦新添加的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！