如何在重新加載html後重新關注輸入元素

Question

我有幾個輸入html元素。在輸入im的變化事件（tab-out）中，製作一個ajax文章並取回html。然後我用這個新的html替換現有的html。這樣做會減少對下一個輸入元素的關注。 然而，在我做ajax post im存儲當前焦點元素的id之前，我可以在html被替換後重新調整相同的輸入。但它不工作

下面是我的代碼

<div id="mycontainer"> 
    <input id="input1" /> 
    <input id="input2" /> 
    <input id="input3" /> 
</div> 


$(function() { 
    $("input").change(function() { 
     $.ajax(
      { 
       data: "somedata", 
       url: "someurl", 
       method: "POST" 
      }) 
      .done(function (response) { 
        var currentElement = $(':focus').attr("id"); 
        $("#mycontainer").html(response) 
        $("#" + currentElement).focus(); 
       }) 
    }) 
}) 

Answer 1

變化事件觸發，所以焦點已經轉移。如果您想專注於已更改的元素，則可以使用event.target獲取對已更改的輸入的引用。

$("input").change(function (event) { 
     $.ajax({ 
      data: "somedata", 
      url: "someurl", 
      method: "POST" 
     }) .done(function (response) { 
       var currentElement = event.target.id; 
       $("#mycontainer").html(response) 
       $("#" + currentElement).focus(); 
     }); 
}) 

如果你想專注於保持它的位置，你的代碼應該工作，這是證明。

const HTML = ` 
 
    <input id="input1" /> 
 
    <input id="input2" /> 
 
    <input id="input3" /> 
 
`; 
 

 
$(() => { 
 
    $("input").change(() => { 
 
    // Add async code to fake ajax 
 
    new Promise((resolve, reject) => { 
 
     setTimeout(() => resolve(HTML), 100); 
 
    }).then(response => { 
 
     const currentElement = $(':focus').attr("id"); 
 
     $("#mycontainer").html(response) 
 
     $("#" + currentElement).focus(); 
 
    }); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mycontainer"> 
 
    <input id="input1" /> 
 
    <input id="input2" /> 
 
    <input id="input3" /> 
 
</div>

然而，在我的評論中提到，這是窮人的做法，因爲你失去的處理程序，所以你必須得復位處理，也許滾動位置。爲了避免這種情況，您可以讓AJAX返回數據並只更新需要更新的位。

Answer 2

是否鏈接了jQuery方法調用，讓他們在指定的順序運行，幫助嗎？

.done(function (response) { 
     var currentElement = $(':focus').attr("id"); 
     $("#mycontainer") 
      .html(response) 
      .find("#" + currentElement) 
      .focus(); 
     }) 

Answer 3

當你點擊頁面（包括按鈕/鏈接加載您的Ajax內容）上的某個地方，單擊元素立即把焦點。所以就在改變html之前，現在已經太晚以至於無法存儲關注的ID。您需要將其存儲在焦點更改上。

編輯： 由於沒有「點擊」參與OP的問題，我提出了上述方案的更新版本：存儲改變輸入焦點處理器運行Ajax的東西。

let changedInput; 
 
$(document).on('focus', 'input', function() { 
 
    if (changedInput) { 
 
    // do whatever with changedInput.val() needed here 
 
    changedInput = null; 
 
    const currentElement = $(this).attr('id'); 
 
    $.ajax({ 
 
     data: "somedata", 
 
     url: "someurl", 
 
     method: "POST" 
 
     }) 
 
     .done(function(response) { 
 
     $("#mycontainer").html(response); 
 
     $("#" + currentElement).focus(); 
 
     }) 
 
    } 
 

 
}); 
 

 
$(document).on('change', 'input', function() { 
 
    changedInput = this; 
 
}) 
 

 

 

 
/* BEGIN FAKE AJAX STUFF 
 
* 
 
*/ 
 
let counter = 0; 
 
$.ajax = function(params) { 
 
    $('#msg').text("Fake AJAX Loading..."); 
 
    return { 
 
    done: function(cb) { 
 
     setTimeout(function() { 
 
     $('#msg').text(""); 
 
     cb(` 
 
     <div id="mycontainer"> 
 
     <input value="${counter}" id="input1" /> 
 
     <input value="${counter}" id="input2" /> 
 
     <input value="${counter++}" id="input3" /> 
 
     </div> 
 
     `); 
 
     }, 300); 
 
    } 
 
    } 
 
} 
 
/* END FAKE AJAX STUFF */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height:20px;" id="msg"></div> 
 
<div id="mycontainer"> 
 
    <input value="" id="input1" /> 
 
    <input value="" id="input2" /> 
 
    <input value="" id="input3" /> 
 
</div>

模糊事件後