.focus()不能工作,因为动态表还没有加载

.focus() does not work because dynamic table not loaded yet - JQUERY

本文关键字:动态 还没有 加载 因为 不能 工作 focus      更新时间:2023-09-26

我正在使用来自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();
            }               
        }
    });

我不知道你甚至在你的例子中调用.focus的地方,但解决方案是简单地在$($tableContainerDiv).html($newTable);之后调用它——即在它被ajax回调追加之后。