Фокус Javascript не работает с динамически загружаемым полем ввода

#javascript #jquery #html #ajax

#javascript #jquery #HTML #ajax

Вопрос:

У меня есть HTML-разметка в шаблоне, в котором есть элемент ввода. Я загружаю его с помощью вызова Ajax и вставляю существующий html с помощью jQuery $(selector).html(response) .

По сути, это всплывающее окно, которое загружается из шаблона. После загрузки всплывающего окна я хочу установить фокус на поле ввода. Я написал этот код :

$("#prescribe-input").focus() после добавления содержимого в существующий HTML, но это не работает. Я тоже пытался сделать это традиционным способом javascript document.getElementById("prescribe-input").focus()

Оба не работают. Для целей тестирования я попытался создать образец поля ввода в Index.html приложения и установите фокус. это работает отлично. Проблема в том, что когда я загружаю html из шаблона с помощью $().html() , он не работает.

Есть ли способ правильно сфокусировать его?

Я знаю, что здесь кода очень мало, но, я полагаю, вопрос не требует пояснений.

Комментарии:

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

2. Если элемент существовал и селектор был правильным, настройка фокуса будет отлично работать на динамическом элементе.

Ответ №1:

если вы используете jquery , то вы можете использовать .on() для динамически генерируемых элементов

 $("#prescribe-input").on( "focus", function() {
  //do what ever you want
});
  

Комментарии:

1. Как, черт возьми, делегированный обработчик событий будет работать с установкой фокуса на элемент?

2. и в любом случае, вы не делегируете событие здесь

Ответ №2:

Вы должны сделать это в функции обратного вызова:

 $(selector).html(response, function(){
   $("#prescribe-input").focus();
})
  

Комментарии:

1. Почему это имеет значение, html() синхронно?

2. возможно, OP фокусирует внимание до добавления содержимого.

3. Вероятно, это так, но использование обратного вызова для синхронного метода действительно не поможет?

4. я только что прочитал это снова, я думаю, что есть дублирование идентификатора. там, скорее всего, доступен другой элемент с тем же id значением.

5. У того же элемента нет другого идентификатора. Я убедился, что логика фокусировки вызывается только после добавления элемента HTML.