JQuery ajax: новое поле ввода потеряло фокус после получения фокуса

Question

Я попытался сфокусироваться на новом созданном элементе ввода во время обновления ajax, но фокус каким-то образом потерялся.

 var options = { 
      url: aURL, 
      type: "POST",     
      dataType: "xml", 
      data: params,   
      success: function(responseData, status, xhr) { 
       // replace DOM element 
       $(".placeholder").html(responseData); 
      } 
     }; 

     $.ajax(options); 

Внутри responseData, есть скрипт

<script>$(function(){createInputAndFocus();});</script> 

Сценарий будет выполняться во время обновления Аякса DOM.

function createInputAndFocus() { 
    $(".placeholder").append('<input type="text" id="foo"/>'); 
    $(".placeholder").find("#foo").focus(); 

    // debug: check if it is focused 
    console.log("active element: " + document.activeElement.id); 
} 

С консоли браузера сконцентрирован созданный вход (foo). Но после завершения ajax он не фокусируется (выделяется) на экране. С консоли проверено, что оно не сфокусировано. document.activeElement - это то же самое, что и перед обновлением ajax.

Восстановляет ли Jquery исходный фокус после ajax? Как сфокусироваться на новом элементе ввода после обновления ajax? Я попытался установить таймер

function createInputAndFocus() { 
     $(".placeholder").append('<input type="text" id="foo"/>'); 
     $(".placeholder").find("#foo").focus(); 

     setTimeout(function() {$(".placeholder").find("#foo").focus();}, 3000); 
    } 

Таймер работает. Таймер не является безопасным решением. таймаут может быть запущен слишком рано, если слишком малый тайм-аут слишком устарел, и пользователи должны ждать, если он слишком длинный. Спасибо за помощь.

Answer 1

Вы можете просто позвонить

createInputAndFocus(); 

прямо из метода успеха()? В противном случае вы можете попробовать добавить async = false в параметры, но это может снизить производительность.