从HTML调用Javascript函数

I am having a HTML table with 5 rows (say) which is being displayed on the webpage. The first column of the table is RowID (which is unique for each row) and the last column of each row is a [X] button (which on click will remove the row). The whole table is in a <div> element with id="cartmain"

我有一个包含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>

This is how I am removing the row:

这就是我移除行的方式:

STEP1: When user clicks on [X] button, an XMLHTTPRequest function will send message to a PHP code with unique id of each row. During the time PHP code is removing the row, DIV element shows "Loading..."

步骤1:当用户单击[X]按钮时，XMLHTTPRequest函数会将消息发送给具有每行唯一id的PHP代码。在PHP代码删除行期间，DIV元素显示“load…”

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

. getelementbyid(“cartmain”)。innerHTML = "加载……”

STEP2: PHP code will delete the row from table (and from database) and will return the remaining table.

步骤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>";
?>

This remaining table received from the PHP code is then shown in the DIV element by using the below line:

然后在DIV元素中使用下面一行显示从PHP代码接收到的其余表:

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

. getelementbyid(“cartmain”)。innerHTML = removeitem.responseText;

My Problem: Suppose I have table with 5 rows. When I click on the Remove button, the row is removed successfully and table is then displayed with 4 remaining rows. Here comes the problem: When I want to remove another row from the table: Nothing is Happening. In other words, if I again click on [X] of some row then nothing happens. The XMLHTTPRequest function is not called. In ideal case, it should have called the XMLHTTPRequest function again with that unique RowID and table should then be displayed with remaining 3 rows.

我的问题是:假设有一个5行的表。当我单击Remove按钮时，将成功删除行，然后显示带有4行的表。问题来了:当我想从表中删除另一行时:什么也没有发生。换句话说，如果我再次单击某一行的[X]，那么什么也不会发生。不调用XMLHTTPRequest函数。在理想的情况下，它应该再次调用XMLHTTPRequest函数，并使用唯一的RowID，然后用剩下的3行显示表。

IMPORTANT NOTE: When I refresh the page, then I am able to remove another row. But this time also, I can remove only one row. For removing one more, I have to refresh the page again.

注意:当我刷新页面时，我可以删除另一行。但这一次，我只能删除一行。为了再删除一个，我必须再次刷新页面。

Is anyone able to identify the problem here? Please help.

有人能在这里找到问题吗?请帮助。

NOTE: My table actually is a Shopping Cart which contains a product in each row. [X] button actually signifies "removing the item" from the cart.

注意:我的表实际上是一个购物车，每一行都包含一个产品。[X]按钮实际上表示从购物车中“删除项目”。

Here is the JavaScript code:

下面是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();
}

The function removeitem shows an alert "The item to be removed is: 123" for the first time but does not shows second time. When I am checking in Firebug console, the following error is coming second time:

函数removeitem显示一个警告“要删除的项第一次为:123”，但第二次不显示。当我在查看Firebug控制台时，以下错误再次出现:

removeitem is not a function

removeitem不是函数

Please help!!

请帮助! !

All my Javascript functions are in a separate file (sc.js) for which I am using <script type="text/javascript" src="js/sc.js"></script> in the HEAD tag of my page.

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

My viewpoint: So finally I think the question comes to a simple point: If a webpage is requesting some HTML from a PHP page using XMLHTTPRequest -- and if that HTML (sent by PHP) contains some button which is calling a Javascript function -- then what will happen in this situation[?]. Now since I am able to remove the row for the first time, I think it is false to say that above situation will not work. It is just that the code that came from PHP and the Javascript which has already been loaded are not aware of each others presence when I click the button second time.

我的观点:最后我想问题涉及到一个简单的观点:如果一个网页请求一些HTML使用XMLHTTPRequest,如果从一个PHP页面HTML(PHP)发送的包含一些按钮,调用一个Javascript函数,那么在这种情况下会发生什么[?]。既然我可以第一次删除这一行，我认为上述情况不会起作用是错误的。它只是来自PHP和已经加载的Javascript的代码，当我第二次点击按钮时，它们并没有意识到彼此的存在。

3 个解决方案

#1

Inside the removeitem function, you're overwriting removeitem by a XMLHttpRequest object. Hence the later error removeitem is not a function.

在removeitem函数中，通过XMLHttpRequest对象覆盖removeitem。因此，以后的错误removeitem不是一个函数。

To fix this, either prefix removeitem by var (recommended), or use another variable name, or both.

要解决这个问题，可以使用var(推荐)的前缀removeitem，或者使用另一个变量名，或者两者都使用。

Recommended code:

推荐的代码:

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();
}

Adding var before removeitem fixes the problem, because the variable is locally defined. When var is omitted, a new value will be attached to the closest parent declaration (the function, in this case).

在removeitem之前添加var可以修复问题，因为变量是局部定义的。当忽略var时，一个新值将附加到最近的父声明(在本例中是函数)上。

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

The previous line is short for:

前一行是:

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

#2

it doesn't look like you're escaping your double quotes like @Rob W has stated. I generally use single quotes when using php to write out HTML. I find this to be a good practice in my opinion.

看起来你并没有像@Rob W所说的那样逃避双重引用。在使用php编写HTML时，我通常使用单引号。在我看来，这是一个很好的实践。

The only other thing I can think of is that maybe your function isn't outside AJAX response text. Just check Firebug or view source of what's being rendered after the first response returned.

我能想到的另一件事是，您的函数可能不在AJAX响应文本之外。只需检查在第一个响应返回后呈现的内容的Firebug或查看源。

I hope this helps.

我希望这可以帮助。

#3

Why you load all table html every click? You can send only true or false when deleting and after you can remove TR element with jQuery.

为什么每次单击都载入所有表格html ?当您可以使用jQuery删除TR元素时，您只能发送true或false。

Removing TR: In your removeitem function, after ajax response, just call $(this).parents("tr").remove();

删除TR:在removeitem函数中，在ajax响应之后，只需调用$(this).parents(“TR”).remove();