Javascript 如何在重新加载html后重新关注输入元素

我几乎没有输入html元素。在输入的更改事件（tab out）上，我会发布一篇ajax文章并返回html。然后我用这个新的html替换现有的html。这样做会失去对下一个输入元素的关注。 但是，在我创建ajax post之前，我会存储当前关注元素的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();
                })
    })
})

$（函数（）{
$（“输入”）.change（函数（）{
$.ajax(
{
数据：“somedata”，
url:“someurl”，
方法：“员额”
})
.完成（功能（响应）{
var currentElement=$（'：focus'）.attr（“id”）；
$（“#mycontainer”）.html（回复）
$（“#”+currentElement）.focus（）；
})
})
})

当您单击页面上的某个位置（包括加载ajax内容的按钮/链接）时，单击的元素立即占据焦点。因此，在更改html之前，存储焦点id已经太晚了。您需要将其存储在焦点更改上

编辑： 由于OP的问题中没有“点击”，所以我建议使用上述解决方案的更新版本：将更改后的输入存储起来，并在focus handler中运行ajax

let changedInput；
$（文档）.on（'focus'，'input'，function（）{
如果（更改输入）{
//对此处需要的changedInput.val（）执行任何操作
changedInput=null；
const currentElement=$（this.attr（'id'）；
$.ajax({
数据：“somedata”，
url:“someurl”，
方法：“员额”
})
.完成（功能（响应）{
$（“#mycontainer”）.html（回复）；
$（“#”+currentElement）.focus（）；
})
}
});
$（文档）.on（'change'，'input'，function（））{
changedInput=this；
})
/*开始伪造AJAX的东西
*
*/
设计数器=0；
$.ajax=函数（参数）{
$（'#msg'）.text（“伪AJAX加载…”）；
返回{
完成：功能（cb）{
setTimeout（函数（）{
$（'#msg'）。文本（“”）；
cb(`
`);
}, 300);
}
}
}
/*结束伪造的AJAX内容*/

---

当您单击页面上的某个位置（包括加载ajax内容的按钮/链接）时，单击的元素立即占据焦点。因此，在更改html之前，存储焦点id已经太晚了。您需要将其存储在焦点更改上

编辑： 由于OP的问题中没有“点击”，所以我建议使用上述解决方案的更新版本：将更改后的输入存储起来，并在focus handler中运行ajax

let changedInput；
$（文档）.on（'focus'，'input'，function（）{
如果（更改输入）{
//对此处需要的changedInput.val（）执行任何操作
changedInput=null；
const currentElement=$（this.attr（'id'）；
$.ajax({
数据：“somedata”，
url:“someurl”，
方法：“员额”
})
.完成（功能（响应）{
$（“#mycontainer”）.html（回复）；
$（“#”+currentElement）.focus（）；
})
}
});
$（文档）.on（'change'，'input'，function（））{
changedInput=this；
})
/*开始伪造AJAX的东西
*
*/
设计数器=0；
$.ajax=函数（参数）{
$（'#msg'）.text（“伪AJAX加载…”）；
返回{
完成：功能（cb）{
setTimeout（函数（）{
$（'#msg'）。文本（“”）；
cb(`
`);
}, 300);
}
}
}
/*结束伪造的AJAX内容*/

更改事件在模糊事件后激发，因此焦点已移动。如果要关注已更改的元素，可以使用

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=`
`;
$(() => {
$（“输入”）。更改（（）=>{
//向伪ajax添加异步代码
新承诺（（解决、拒绝）=>{
setTimeout（（）=>resolve（HTML），100）；
})。然后（响应=>{
const currentElement=$（'：focus'）.attr（“id”）；
$（“#mycontainer”）.html（回复）
$（“#”+currentElement）.focus（）；
});
})
})

更改事件在模糊事件后激发，因此焦点已移动。如果要关注已更改的元素，可以使用

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=`
`;
$(() => {
$（“输入”）。更改（（）=>{
//向伪ajax添加异步代码
新承诺（（解决、拒绝）=>{
setTimeout（（）=>resolve（HTML），100）；
})。然后（响应=>{
const currentElement=$（'：focus'）.attr（“id”）；
$（“#mycontainer”）.html（回复）
$（“#”+currentElement）.focus（）；
});
})
})

Change事件在模糊事件后触发，因此焦点已移动。您是否调试并检查了什么是

currentElement

？顺便说一句，替换所有HTML是个坏主意，您会丢失处理程序、焦点、滚动位置…更改事件在模糊事件后触发，因此焦点已移动。您是否调试并检查了什么是

currentElement

？顺便说一句，替换所有HTML是个坏主意，你会丢失处理程序、焦点、滚动位置…这可能有效，但可以更简单，请看我的回答我不希望焦点集中在已更改的元素上，而是保留在原来的位置。这可能有效，但可以更简单，请看我的回答我不希望焦点集中在已更改的元素上，相反，它会保持在原来的位置。加载ajax后，焦点会回到已更改的输入，而不是新的焦点。@BulentVural好吧，如果OP想聚焦新的输入，现有的代码应该可以工作，添加了一个解释。Th