.focus（）不适用于jQuery动态创建的元素

Question

我之前曾使用下面的语句来关注表单中的第一个元素，并且效果很好。
$('form:first *:input[type!=hidden]:first').focus();
但是现在的问题是，当我以空的形式使用它（没有任何输入元素），并且在完成一些工作之后，我通过使用jQuery .html()在该表单中创建元素时，它不会关注任何元素。
这是我的表格：

<form id="edit_marks" method="post">
  <div id="display">
  </div>
</form>

这是我的jQuery AJAX：

function getData()
{
    var Semester = $('#Semester').find(':selected').val();
    var StudentID = "<?php echo $_GET['id'];?>";
    $.ajax(
    {
        type: 'POST',
        url: 'ajax_get_report_for_edit.php', 
        data: {Semester:Semester, StudentID:StudentID},
        dataType: 'text',
        success: function(data)
        {
            $('#display').html(data);
        },
        error: function(ts)
        {
            alert("AJAX Error: \n" + ts.responseText);
        }
    });
}
getData();
$('form:first *:input[type!=hidden]:first').focus();

Answer 1

您要在添加表单之前触发事件，因此需要在添加表单后触发事件。 将其添加到ajax成功中。 由于ajax是异步的，它可以随时完成，因此在完成之前它将从函数中返回。

function getData()
{
    var Semester = $('#Semester').find(':selected').val();
    var StudentID = "<?php echo $_GET['id'];?>";
    $.ajax(
    {
        type: 'POST',
        url: 'ajax_get_report_for_edit.php', 
        data: {Semester:Semester, StudentID:StudentID},
        dataType: 'text',
        success: function(data)
        {
            $('#display').html(data);
            $('form:first *:input[type!=hidden]:first').focus();
        },
        error: function(ts)
        {
            alert("AJAX Error: \n" + ts.responseText);
        }
    });
}
getData();

Answer 2

将焦点代码移到AJAX成功内部，因为AJAX表示它是异步调用。 因此，为了使focus工作在AJAX之后是要成功地添加它。

function getData() {
    var Semester = $('#Semester').find(':selected').val();
    var StudentID = "<?php echo $_GET['id'];?>";
    $.ajax({
        type: 'POST',
        url: 'ajax_get_report_for_edit.php', 
        data: {
            Semester:Semester, 
            StudentID:StudentID
        },
        dataType: 'text',
        success: function(data) {
            $('#display').html(data);
            $('form:first *:input[type!=hidden]:first').focus();
        },
        error: function(ts) {
            alert("AJAX Error: \n" + ts.responseText);
        }
    });
}
getData();