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

这就是我删除行的方式：

STEP1： 当用户点击[X] 按钮时，XMLHTTPRequest 函数将向PHP 代码发送消息，每行的ID 都是唯一的。在 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>";
?>

从 PHP 代码中接收到的剩余表格然后使用以下行显示在 DIV 元素中：

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。

要解决此问题，请在 removeitem 前面加上 var（推荐），或使用其他变量名，或两者兼而有之。

推荐代码：

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 可以解决问题，因为该变量是本地定义的。当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();