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

【问题标题】：Calling javascript Function from HTML with multiple parameters使用多个参数从 HTML 调用 javascript 函数
【发布时间】：2019-11-29 07:22:46
【问题描述】：

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

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

【问题讨论】：

标签： javascript php html parameters

【解决方案1】：

你可以试试这个代码

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

【讨论】：

【解决方案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>

【讨论】：