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

.focus（）不会动态地处理由jQuery创建的元素

2 个答案: