.focus () не работает на входе, в то время как другие атрибуты работают

Question

У меня есть классическая table / thead / 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');

даже установка идентификатора на входе и использование document.getElementBuId('id').focus() не работает.

Спасибо!

* редактировать *

сайт довольно сложный (смесь шаблонного / статического HTML и динамического HTML), но таблица выглядит так (рендеринг HTML в Chrome, макет с помощью Tidy): 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(), который должен указывать на tbody таблицы

* редактировать 4 *

трудная проблема ... вот полный lectures.js файл: http://pastebin.com/Jkg0DZqa batisses и compteurs - это объекты json, загружаемые через шаблон. пользователь выбирает batisse, затем compteur, затем нажимает кнопку, которая вызывает buildAjout(), которая вызывает в этом примере buildElectric($("#lectures"), compteur);. Как только строка заполнена пользователем, вызывается onBlurLecture(tr_parent), данные отправляются на сервер через AJAX, а function callback_compteurs_lecture_add(AJAX_ID) вызывается после завершения вызова ajax. Функция SendCommand - это пользовательская функция, использующая jquery ajax.

Создание первой строки ввода (и фокуса) работает, но не той, которая была создана при обратном вызове ajax.

* редактировать 5 *

полная отображаемая страница выглядит следующим образом: http://pastebin.com/UfBYcjX3 Я сократил переменную batisses. (Полная) страница не имеет ошибок JavaScript. В консоли chrome javascript я не могу сфокусировать ввод.

* редактировать 6 *

неправильное название функции в этом вопросе для SendCommand. неподвижная.

найденное решение: http://bit.ly/bHd6nH

Answer 1

На какой идентификатор вы ориентируетесь? Потому что, если я заменю $("#" + AJAX_ID) на $('table'), это сработает -> demo (по крайней мере в Chrome)

и если я оберну функцию внутри $(document).ready(function(){...}), она будет работать в IE -> demo

---

Я все еще ищу, в чем может быть проблема, но у меня есть несколько комментариев о вашем коде.

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; в конец своего обратного вызова.

В качестве альтернативы, если вы задаете параметр для функции обработчика событий, например function(e) {...}, вы можете вызвать e.preventDefault() из обратного вызова вместо return false;.

---

Во-первых, я не знаю, в этом ли проблема, но идентификаторы не могут начинаться с цифры.

Во-вторых, какой элемент имеет идентификатор AJAX, который вы используете? В зависимости от этого вы получите разные результаты.

Чтобы избежать проблем с идентификацией, вы можете сделать:

$("#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

понял!

Я использую «табуляцию» (табуляция), чтобы переключаться на следующий ввод при записи в них. На последнем фокус выходит за окно, поэтому я не могу его установить. Я преобразовал последний столбец «status» в input, чтобы он получал фокус при выполнении onBlur. Когда вызывается обратный вызов загрузки ajax, добавляется новая строка и ввод фокусируется, как и должно.

Хром: работает
Firefox: работает
IE8: работает (с исправлением)

потратил полтора дня на это смешение

спасибо всем!

Answer 4

Попробуйте вызвать .focusin() (это было добавлено в jQuery's 1.4) См. Документацию .