动态 JQuery UI 中的 Tablesorter 不起作用

Question

这是我第一次 post 访问此站点，我发誓我已经搜索了我的问题的答案。也许我在阅读的主题中遗漏了一些内容。（抱歉我的英语不好，我是法国人。）

我在用户执行点击时创建一个对话框，然后我用 ajax 结果填充此对话框（具有特定内容的 table）。这是我的代码：

包括

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="../tablesorter/jquery.tablesorter.js"></script>

我的js函数

function click_like(e, idProjet) {
    var evt = e ? e:window.event;
    if (evt.stopPropagation)    
        evt.stopPropagation();
    if (evt.cancelBubble!=null) 
        evt.cancelBubble = true;

    if(document.getElementById("dialog") != null) {
        $('#dialog').remove();
    }

    $('#projets').append("<div id='dialog' style='display: none;'></div>");

    $( "#dialog" ).dialog(
    {
        title: 'Projet '+idProjet,
        autoOpen: false,        
        height: 400,
        width: 400,

        close: function(event, ui) {
            $(this).dialog('destroy').remove();
            $('#dialog').remove();          
        }
    }); 

    $( "#dialog" ).load('./../js/js_get_etudiants_interesses.php?idProjet='+idProjet).dialog('open');
}

Php 文件

<?php
    //php things
?>

<p> Les étudiants intéressés sont: </p>

<table id="tous_les_etudiants" class="tablesorter">
    <thead>
        <tr>
            <td> Nom </td>
            <td> Prénom </td>
            <td> Spécialité </td>
            <td> Email </td>
        </tr>
    </thead>
    <tbody>
<?php
    foreach($etudiants AS $etudiant) {
        echo '<tr>'; 
        echo '<td>'.$etudiant->get_NOM().'</td>';
        echo '<td>'.$etudiant->get_PRENOM().'</td>';
        echo '<td>'.$etudiant->get_SPECIALITE().'</td>';
        echo '<td>'.$etudiant->get_EMAIL().'</td>';
        echo '</tr>';
    }
?>
    </tbody>
</table>

<script>
    $("#tous_les_etudiants").tablesorter();
</script>

问题是我没有收到任何错误，table 不是 sortable，但是样式有效。在其他 table （不是按需生成）上它工作正常。我看过这个线程，但它没有答案 Why jquery... and here，但我很确定我在创建 div 之后进行了 tablesorter 调用。我试图在 php 文件中调用，也在我的 js 函数的末尾。也许你可以指出我为什么愚蠢，因为我确定这是愚蠢的。感谢阅读，如果答案已经存在，我们深感抱歉。

Answer 1

Tablesorter 需要在对话框 window 变为可见后进行初始化 (demo):

HTML

<button id="opener">Open Dialog</button>
<div id="dialog" title="Basic dialog">
    <table class="tablesorter">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

脚本

$(function () {

    $("#opener").click(function () {
        $("#dialog").dialog("open");
    });

    $("#dialog").dialog({
        autoOpen: false,
        open: function (event, ui) {
            $('.ui-dialog table').tablesorter({
                theme: 'blue'
            });
        }
    });

});

更新：如果您打算将信息加载到对话框中，则此方法 (dialog().load().dialog('open');) 不正确，因为未考虑 ajax 的异步性质。相反，use the load() function's callback method:

$( "#dialog" ).load('./../js/js_get_etudiants_interesses.php?idProjet='+idProjet, function(){
    $( "#dialog" ).dialog('open');
});

动态 JQuery UI 中的 Tablesorter 不起作用

Tablesorter in dynamic JQuery UI doesn't work

javascript

jquery

tablesorter

jquery-ui

dynamic-content

包括

我的js函数

Php 文件