自动将焦点设置在动态加载的输入字段上答案

【问题标题】：Automatically set focus on dynamically loaded input field自动将焦点设置在动态加载的输入字段上
【发布时间】：2016-06-05 20:54:39
【问题描述】：

使用 jQuery，我试图在 AJAX 调用后对输入字段执行 .focus()，但到目前为止没有运气。

小sn-p给出思路：

$.ajax({
    type: "GET",
    url: url,
    success: function (data) {
        $('#myModal').remove();
        $('body').append(data);
        $('#myModal').modal('show');
    },
    complete: function(){
        $('#input-new-saldo').focus();
    }
});

这是 HTML：（由 AJAX 加载并附加到正文）

        <form id="form-update-saldo">
            <div class="modal-body">
                <div class="form-group">
                    <label class="sr-only" for="input-new-saldo">Saldo (in euro)</label>
                    <div class="input-group">
                        <input type="text" class="form-control input-lg" id="input-new-saldo" name="new_saldo" value="<?php echo $saldo['saldo']; ?>">
                        <div class="input-group-addon">€</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success" id="submit-update-saldo">Update saldo</button>
            </div>
        </form>

到目前为止我所做的尝试：

通过其他线程解决了相同类型的问题，但解决方案似乎对此没有帮助。（前任。 Javascript focus does not work on dynamically loaded input box jquery focus not working on a page loaded with ajax)
确保该元素在调用期间存在。确实如此： $('#input-new-saldo');给出正输出。
确保调用正确的元素。确实如此： $('#input-new-saldo').val('test');改变元素的值。

但是，调用 $('#input-new-saldo').focus();什么都不做，也不给出任何 JS 错误。

在我看来，在对我的应用程序外部某处进行 AJAX 调用期间，焦点似乎以某种方式丢失了，我无法在回调函数中将其偷回。这有意义吗？怎么可能解决？

【问题讨论】：

你试过 HTMLElement.click() 函数了吗？
是的，我试过了，但没用。我尝试使用 document.getElementById('input-new-saldo').click();和 $('#input-new-saldo').click();不知道你指的是哪一个。
您正在删除#myModal，然后执行$("myModal").modal("show");。这应该如何工作？
这里对我有用：jsfiddle.net/barmar/t65nu71g/6 也许它与您正在使用的模态库有关。
是的，我只是删除旧的模态，然后将新模态附加到正文然后显示它@Barmar

标签： javascript jquery html ajax focus

【解决方案1】：

奇怪的是，最终发现这个帖子 https://stackoverflow.com/a/23921617/3963594 直接解决了这个问题。

重要的部分是在将事件附加到正文之后，在显示之前将其绑定到模式。

【讨论】：

【解决方案2】：

你已经很接近了。输入元素可以有 autofocus 属性。

所以不是：

$('#input-new-saldo').focus();

试试：

$('#input-new-saldo').attr('autofocus' , 'true');

希望对你有帮助

【讨论】：

这是一个有趣的输入，不敢相信我错过了。但是，在这种特殊情况下，它似乎不起作用。 ://

【解决方案3】：

$.ajax({
        type: "GET",
        url: url,
        success: function (data) {
            $('#myModal').remove();
            $('body').append(data);
            $('#myModal').modal('show');
            $('#myModal').on('shown', function() {
                $('#input-new-saldo').focus();
            });
        }
    });

【讨论】：