javascript - .focus() 不起作用，因为尚未加载动态表 - JQUERY

Question

我正在使用来自 AJAX 调用的数据动态创建一个表。我正在使用“选择/下拉框”.on('change') 函数将值发送到我的 PHP。表格显示后，我想将焦点设置到在表格上动态创建的搜索框。

问题似乎在于，由于表格需要几秒钟才能变得可见，因此 .focus() 命令会在表格可见之前触发。我希望在创建表函数完成后触发 .focus() 命令。

Javascript/Jquery 代码:

$('#t6F3Box1').on('change', function()
    {   
        var $newTable ='<table id="tempEmployerTbl" class="studentTables"><thead><tr>';
        var $searchStr=new RegExp("ID");
        var $tableContainerDiv="#t6F3TableCont";
        var $rowFlag=0;
        var $responseDataValue=[]
        var $employerState=$('#t6F3Box1').val();
        var $getTableDataPhp="../application/employer.php";
        var $data=[];

            $('#t6F3ErrDiv').text('');
            $('#t6F3TableCont, #t6F3HLine2, #t6F3HLine2').show();

        $data += "&employerState=" + encodeURIComponent($employerState);

        $.ajax({
        type: 'POST',
        async: false,
        url:  $getTableDataPhp,
        cache: false,
        datatype: 'json',
        data: $data,
        success: function($responseData)
        {

            //Loop through the responsdata returned in a JSON Array
            //dynamically create the Employer drop down box 
            if (!$responseData.authenticationError)
            {
                    //Create the header for the Employer Table
                    $.each($responseData, function($key, $value) 
                    {
                        if($rowFlag==0)
                        {
                            $responseDataValue=$responseData[$key];
                            $.each($responseDataValue, function($keys, $values)
                            {
                                if ($searchStr.test($keys))
                                {

                                    $newTable += '<th class="tableDataHide">'  + $keys + '</th>';

                                }
                                    else
                                {

                                    $newTable += '<th class="tableDataShow">'  + $keys + '</th>'
                                }           


                            });
                            $rowFlag=1;
                        }
                    });
                $newTable +='</tr></thead><tbody>';

                //Create the body for the Employer Table
                $.each($responseData, function($key, $value) 
                {
                    $newTable +=  '<tr>'
                    $responseDataValue=$responseData[$key];
                    $.each($responseDataValue, function($keys, $values)
                    {   
                        if ($searchStr.test($keys))
                        {

                            $newTable += '<td class="tableDataHide">'  + $values + '</td>';

                        }
                            else
                        {
                            if($values==null)
                            {
                                $values="";
                            }
                            $newTable += '<td class="tableDataShow">'  + $values + '</td>'
                        }           

                    }); 

                    $newTable +='</tr>';


                }); 

                $newTable +='</tbody></table>';
                $($tableContainerDiv).html($newTable); 

                $("#tempEmployerTbl").dataTable();
$('#tblSearchBox').focus();

            }               
        }
    });

Answer 1

在你的示例中，我什至没有看到你在哪里调用 .focus，但解决方案只是在 $($tableContainerDiv).html($newTable); 之后调用它。 -- 即在它被 ajax 回调追加之后。