Ajax請求后，Javascript代碼不起作用

Question

我使用ajax重新加載頁面，但是我遇到的問題是javascript代碼僅在第一次工作，然后在刷新后不起作用，我將此javascript代碼用於ajax：

function showUser(str, pageno, type, sub) {
    if (str == "" || pageno == "" || type == "" || sub == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "<?php echo $view['router']->generate('listing') ?>?page=" + pageno + "&genre=" + str + "&cat=" + type + "&subcat=" + sub, true);
    xmlhttp.send();
}

在清單頁面中，我喜歡這樣：

$(document).ready(function () {
    alert('test'); //I see alert message only at the first time I run the page
    $("#category-table").tablesorter();
});

有人有主意嗎？

Answer 1

如果您使用jquery的ajax，不僅可以為您解決跨瀏覽器可能出現的所有問題，還可以獲得方便的回調。

您的問題是，ajax請求后，就緒事件未在文檔上觸發。 因此，您需要對ajax請求使用回調，因此，一旦完成，就可以重新運行tablesorter插件。

您可以通過在將響應文本分配給DIV html之后重新調用該插件委托方來實現。 但是，由於有了jquery，您可以自己簡化事情

將函數更改為：

function showUser(str, pageno, type, sub) {

    var ele = $('#txtHint');

    if (str == "" || pageno == "" || type == "" || sub == "") {
        ele.html('');
        return;
    }

    ele.load("<?php echo $view['router']->generate('listing') ?>?page=" + pageno + "&genre=" + str + "&cat=" + type + "&subcat=" + sub, function(){

        $("#category-table").tablesorter();

    });


}

Answer 2

嘗試這個

function showUser(str, pageno, type, sub) {
  var $txtHint = $("#txtHint");
  $txtHint.empty();
  if (str &&  pageno  && type && sub) { // assuming none of them are 0
    $txtHint.load("<?php echo $view['router']->generate('listing') ?>",
    {"page":pageno, "genre":str,"cat":type, "subcat":sub},
      function() {
        $("#category-table").tablesorter();
      }
    );
  }
}