動態JQuery UI中的Tablesorter不起作用

Question

這是我在該網站上發布的第一篇文章，我發誓我已搜索問題的答案。 也許我錯過了我所讀主題的內容。 （對不起，我的英語，我是法語。）

我在用戶執行clic時創建一個對話框，然后用ajax結果（具有特定內容的表）填充此對話框。 這是我的代碼：

包括

<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>

問題是我沒有錯誤，表不是可排序的，但是樣式有效。 在其他表上（不是按需生成），它可以正常工作。 我看到這個線程，但它並沒有回答為什么jQuery的......而這里 ，但我敢肯定我做創作的div后的tablesorter通話。 我試圖在js函數末尾的php文件中進行調用。 也許您可以指出為什么我如此愚蠢，因為我確信這是愚蠢的。 謝謝你的閱讀，如果答案已經存在，對不起。

Answer 1

在對話框窗口變為可見后，需要對Tablesorter進行初始化（ 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的異步特性。 而是使用load()函數的回調方法 ：

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