.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();