Question

我在JS中创建了一个函数，通过HTML获取AJAX内容并将其放入Bootstrap对话框中。

现在我已将自动对焦属性添加到动态HTML中的输入框中。问题是我看到有时关注输入框然后它就消失了。

JS代码：

function getPage(userid) {
    $.ajax({
        type: 'POST',
        url: PAGE_URL,
        data: {'userid':userid},
        success: function (data) {
            changeDialogContent(data);
        },
        error: function (e, textStatus) {
            alert('Error occured while processing your request');
        }
    });
}

changeDialogContent函数只是将动态内容作为HTML添加到Dialog。

var bootstrapmodal=$('#modelDiv');
function changeDialogContent(content) {
    bootstrapmodal.html(content);
}

HTML输入代码：

<input type="text" class="form-control input-sm someInputBox" autofocus="autofocus" value="0" placeholder="Enter Name"/>

我在尝试将HTML内容设置到Bootstrap对话框后尝试添加$('.someInputBox').focus();，也没有运气。

我缺少什么重要的东西？

Answer 1

这是我的PHP代码，我认为它与你的目标类似..

test.php的：

<?php
        echo '<input id="my-input" type="text" class="form-control input-sm someInputBox" autofocus="autofocus" value="0" placeholder="Enter Name"/>';

?>

HTML和JAVASCRIPT代码：

 <html>
    <head>
        <script src = "bower_components/jquery/dist/jquery.js"></script>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

        <script>


            function getPage() {
                $.ajax({
                    type: 'POST',
                    url: "test.php",
                    data: {},
                    success: function (data) {
                        changeDialogContent(data);
                            document.getElementById("my-input").focus();
                    },
                    error: function (e, textStatus) {
                        alert('Error occured while processing your request');
                    }
                });
            }
            function changeDialogContent(content) {
                $('#modelDiv').html(content);
            }   

        </script>
    </head>
    <body onload="getPage()">
        <div id = "modelDiv" class="col-md-3 col-md-offset-4">
        </div>
    </body>
</html>

我使用了bower，因此jquery和bootstrap的源路径不是cdn。这段代码工作得很好..我没有遇到任何错误。我很抱歉，由于它有服务器请求和响应，我无法提供小提琴。所以我在自己的机器上测试了它。

如果我误解了任何事情，请纠正我。

自动对焦在AJAX的动态内容文本框中不起作用

1 个答案: