Question

我遇到的问题是，一旦我的页面被渲染，焦点就不会在动态创建的表/输入的第一个输入元素上设置。

在.jsp中我有以下内容：

<script type="text/javascript">
  $(document).ready(function(){

    if(_page != "one") {
      buildTable(shipQty);
      $('#shipItems[0].barCode').focus();
    }

</script>

包含.js，其中包含buildTable函数

function buildTable(shipQty)
{
  var _tbl = $('<table>').attr({
    id : 'barCodeTable',
    border : '1'
  });

  _tbl.append($('<tr>').append($('<td>').text('Box BarCode'),$('<td>').text('INBOUND Tracking Number')));

  for ( var _index = 0; _index < shipQty; _index++)
  {
    var _inputBarCode = $('<input>').attr({
            class : 'form-med',
            type : 'text',
            name : 'shipItems[' + _index + '].barCode',
            id : 'shipItems[' + _index + '].barCode',
            maxlength: '8'
        }).change(_barCodeChange);

    var _shippingTrackingCode = $('<input>').attr({
      class : 'form-med',
      type : 'text',
      name : 'shipItems[' + _index + '].shipCompanyBarCode',
      id : 'shipItems[' + _index + '].shipCompanyBarCode'
    }).change(_trackingNumberChange);

    _tbl.append($('<tr>').append($('<td>').append(_inputBarCode)).append($('<td>').append(_shippingTrackingCode)));

  }

  $('#tableWrap').append(_tbl);
}

我已经在stackoverflow上查看了几个不同的解决方案here，here，here和其他解决方案，但无济于事。

我不明白这个问题。

Answer 1

它与动态代码无关。问题是你的jQuery选择器与你想要的不匹配。您的代码正在查找属性为零的元素。

您需要逃避.，[和]。

$('#shipItems\\[0\\]\\.barCode').focus();

运行示例： http://jsfiddle.net/NC4uz/

来自jQuery Selector docs：

要使用任何元字符（例如!"#$%&'()*+,./:;<=>?@[\]^ {|}〜) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id =“foo.bar”`，可以使用选择器$（“＃foo \ .bar” W3C CSS规范包含有关有效CSS选择器的完整规则集。同样有用的是Mathias Bynens关于标识符的CSS字符转义序列的博客条目。

无法使.focus处理动态创建的输入元素

1 个答案: