从 HTML 调用 Javascript 函数

Question

我有一个包含 5 行（比如说）的 HTML 表格，它显示在网页上。表格的第一列是RowID（每行都是唯一的），每行的最后一列是[X]按钮（单击该按钮将删除排）。整个表格位于带有 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..."

STEP2: 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 is not a function

请帮忙！！

我的所有 Javascript 函数都位于一个单独的文件 (sc.js) 中，我正在使用该文件 在我的页面的 HEAD 标记中。

我的观点：所以最后我认为问题很简单：如果一个网页使用 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();