Question

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

麻烦似乎是因为表需要几秒钟才能看到，所以.focus（）命令会在表可见之前触发。我希望在create table函数完成后触发.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回调之后。

.focus（）不起作用，因为尚未加载动态表 - JQUERY

1 个答案: