使用多个参数从 HTML 调用 javascript 函数

Question

我正在尝试调用一个名为 confirmRemove(title, id) 的 javascript 函数来从表中删除一个元素。 当用户单击看起来像“X”的链接时，应调用此函数。 我在下面附上了我的代码来展示我是如何做到这一点的，但我似乎遇到了一些错误，我不确定为什么。 大多数元素都可以删除，但是当我单击链接调用函数时，有一些元素没有任何反应。 有更好的方法吗？ 不知道为什么会这样。

<td><?php echo '<a onclick="confirmRemove(\'' . $title . '\',\'' . $id . '\')" 
href="javascript:void(0)">X</a>';?></td>

Answer 1

你可以试试这段代码

<td> <a onclick="confirmRemove('<?php echo $title; ?>','<?php echo $id; ?>')" 
   href="javascript:void(0)">X</a></td>

Answer 2

您询问是否有更好的方法来执行此操作 - 我建议有并且它是使用绑定到所讨论的特定 HTML 元素的外部注册事件处理程序 - 特别是本例中的超链接。

如果您将相关属性分配给超链接（数据集属性对于此类任务非常有用），您可以非常轻松地在事件侦听器中处理它们。 采用这种方法不需要对引号进行复杂的escaping ，最重要的是你可以将 HTML 与 Javascript 分开——事件处理程序可以在另一个文件中

<td>
    <a class='removal' href='javascript:void(0)' data-title="<?php echo $title;>" data-id="<?php echo $id;?>">X</a>
</td>


<script>
    Array.from( document.querySelectorAll('a.removal') ).forEach( a=>{
        a.addEventListener('click',function(e){
            confirmRemove( this.dataset.title, this.dataset.id )
        });
    });
</script>