從HTML調用Javascript函數

Question

我有一個包含5行（比如說）的HTML表格，它正在網頁上顯示。 表的第一列是RowID （每行唯一），每行的最后一列是[X]按鈕（點擊后將刪除該行）。 整個表位於<div>元素中， id="cartmain"

<div id="cartmain">
     <table>
          <tr>
            <td>....</td>
            <td>....</td>
            <td> <a href="#" onclick="removeitem('id1')"> [X] </a> </td>
          </tr>
          ..
          ..
     </table>
</div>

這是我刪除行的方式：

第1步：當用戶單擊[X]按鈕時，XMLHTTPRequest函數將向每行具有唯一ID的PHP代碼發送消息。 在PHP代碼刪除行的過程中，DIV元素顯示“正在加載...”

document.getElementById("cartmain").innerHTML = "Loading..."

第2步： PHP代碼將從表（和數據庫）中刪除行，並將返回剩余的表。

<?php
     //removing row from database/table...

     //send the remaining table back to the XMLHTTPRequest function...
     echo "<table>";
     echo "<tr><td>...</td>
               <td>...</td>
               <td> <a href=\"#\" onclick=\"removeitem('id1')\"> [X] </a> </td>";
     echo "</tr>";
     ...
     ...
     ...
     echo "</table>";
?>

然后，使用以下行在DIV元素中顯示從PHP代碼接收的剩余表：

document.getElementById("cartmain").innerHTML = removeitem.responseText;

我的問題：假設我有5行的表。 當我單擊“刪除”按鈕時，該行將被成功刪除，然后會顯示包含剩余4行的表格。 問題出現了：當我想從表中刪除另一行時：什么都沒發生。 換句話說，如果我再次單擊某行的[X] ， 則沒有任何反應 。 不調用XMLHTTPRequest函數。 在理想情況下，它應該再次使用該唯一RowID調用XMLHTTPRequest函數，然后應該顯示剩余3行的表。

重要說明：當我刷新頁面時，我可以刪除另一行。 但這一次，我只能刪除一行。 要刪除一個，我必須再次刷新頁面。

有人能夠在這里找出問題嗎？ 請幫忙。

注意：我的桌子實際上是一個購物車，每行包含一個產品。 [X]按鈕實際上表示從購物車中“刪除項目”。

這是JavaScript代碼：

function removeitem(itemid)
{
    alert("The item to be removed is: "+itemid);
    if(window.XMLHttpRequest)
    {
        removeitem = new XMLHttpRequest();
    }
    else
    {
        removeitem=new ActiveXObject("Microsoft.XMLHTTP");
    }

    removeitem.onreadystatechange=function()
    {
        if (removeitem.readyState==4 && removeitem.status==200)
        {
            document.getElementById("cartmain").innerHTML=removeitem.responseText;
        }
        else if(removeitem.readyState < 4)
        {
            document.getElementById("cartmain").innerHTML="Loading...";
        }
    }
    var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID.
    removeitem.open("GET",linktoexecute,true);
    removeitem.send();
}

函數removeitem第一次顯示警告“要刪除的項目是：123”，但未顯示第二次。 當我在Firebug控制台中檢查時，第二次出現以下錯誤：

removeitem不是一個功能

請幫忙！！

我的所有Javascript函數都在一個單獨的文件（sc.js）中，我在我的頁面的HEAD標記中使用了<script type="text/javascript" src="js/sc.js"></script> 。

我的觀點：最后我認為這個問題很簡單：如果一個網頁使用XMLHTTPRequest從PHP頁面請求一些HTML - 如果該HTML（由PHP發送）包含一些調用Javascript函數的按鈕 - 那么在這種情況下會發生什么[？]。 既然我能夠第一次刪除該行，我認為上述情況不起作用是錯誤的。 只是當我第二次點擊按鈕時，來自PHP和已經加載的Javascript的代碼不知道彼此存在。

Answer 1

在removeitem函數中，您將通過XMLHttpRequest對象覆蓋removeitem 。 因此，后來的錯誤removeitem is not a function 。

要解決此問題，可以使用var（推薦）前綴removeitem ，或使用其他變量名稱，或兩者都使用。

推薦代碼：

function removeitem(itemid) {
    alert("The item to be removed is: "+itemid);
    var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    removeitem.onreadystatechange = function() {
        if (removeitem.readyState == 4 && removeitem.status == 200) {
            document.getElementById("cartmain").innerHTML = removeitem.responseText;
        } else if(removeitem.readyState < 4) {
            document.getElementById("cartmain").innerHTML="Loading...";
        }
    }
    var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID.
    removeitem.open("GET", linktoexecute, true);
    removeitem.send();
}

在removeitem之前添加var removeitem解決問題，因為該變量是本地定義的。 當省略var ，新值將附加到最近的父聲明（在本例中為函數）。

var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

上一行簡稱：

var removeitem;
if (window.XMLHttpRequest) {
    removeitem = new XMLHttpRequest();
} else {
    removeitem = new ActiveXObject("Microsoft.XMLHTTP");
}

Answer 2

看起來你並沒有像@Rob W所說的那樣逃避你的雙引號。 我在使用php寫出HTML時通常使用單引號。 在我看來，我認為這是一個很好的做法。

我能想到的另一件事是，你的函數可能不在AJAX響應文本之外。 只需檢查Firebug或查看返回第一個響應后正在呈現的內容的來源。

我希望這有幫助。

Answer 3

為什么你每次點擊加載所有表格html？ 刪除時以及使用jQuery刪除TR元素后，您只能發送true或false。

刪除TR：在你的removeitem函數中，在ajax響應之后，只需調用$(this).parents("tr").remove();