Установите фокус на поле в динамически загружаемом DIV

StackOverflow https://stackoverflow.com/questions/1433742

  •  07-07-2019
  •  | 
  •  

Вопрос

Каков правильный метод для установки фокуса на определенное поле в динамически загружаемом DIV?

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

Следующий HTML-код извлекается в display ДИВ:

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

Большое, преогромное спасибо!

Это было полезно?

Решение

Функция load () является асинхронной функцией. Вы должны установить фокус после завершения вызова load (), то есть в функции обратного вызова load (), потому что в противном случае элемент, на который вы ссылаетесь #header, еще не существует. Например: 

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

У меня были проблемы даже с этим решением, поэтому я сделал setTimeout в обратном вызове и установил фокус на тайм-ауте, чтобы сделать / действительно / уверенный, что элемент существует.

Другие советы

Вы пробовали просто выбирать по идентификатору? 

$("#header").focus();

Поскольку идентификаторы должны быть уникальными, нет необходимости иметь более конкретный селектор.

Да, это происходит при манипулировании элементом, который еще не существует (несколько участников здесь также обратили внимание на уникальный идентификатор).Я столкнулся с аналогичной проблемой.Мне также нужно передать аргумент функции, манипулирующей элементом, который вскоре будет отрисован.

Отмеченное здесь решение мне не помогло.Наконец я нашел тот, который работал прямо из коробки.И к тому же это очень красиво - застежки.

Вместо того, чтобы:

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

Попробуй это:

setTimeout( function() { $( '#header' ).focus() }, 500 );

В моем коде, тестирующем передачу аргумента, это не сработало, тайм-аут был проигнорирован:

setTimeout( alert( 'Hello, '+name ), 1000 );

Это работает, тайм-аут тикает:

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

Отстойно, что w3schools не упоминает об этом.

Кредиты идут на: makemineatriple.com.

Надеюсь, это поможет кому-нибудь, кто придет сюда.

Мартас

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

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

Если

$("#header").focus();

не работает, тогда есть ли на вашей странице другой элемент с идентификатором header?

Используйте firebug для запуска $("#header") и посмотрим, что это вернет.

Как отметил Ому, вы должны установить фокус в функции готовности документа. JQuery предоставляет это для вас. И выберите по идентификатору. Например, если у вас есть страница входа: 

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

Это выполняется при загрузке страницы. 

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>

Динамически добавленные элементы должны быть добавлены в DOM ... clone (). append () добавляет его в DOM ..., что позволяет выбирать его с помощью jquery. 

$("#header").attr('tabindex', -1).focus();

$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

большинство ошибок связано с тем, что U использует неправильный объект для установки свойства или функции. Используйте console.log (new_fild); чтобы увидеть, какому объекту U попытаться установить свойство или функцию.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top