javascript - 将 id 从一个函数传递到事件监听器函数以确认删除操作

Question

尝试在用户点击垃圾桶图标时提供功能，弹出一个模式询问他们是否确定是否要删除。如果他们点击是，则会提交删除操作。

但是，我很难弄清楚的问题是将我的 id 从我的函数传递给我的另一个匿名函数事件监听器，该事件监听器的参数包含 userid .

我不能将事件监听器匿名函数放在 deleteUser 函数中，因为这会导致发生多个删除操作。

例如，第 1 次删除会正常工作，我再次删除，一次会发生 2 次删除，我再次删除会一次发生 3 次删除。

这是我尝试过但行不通的示例，因为它会导致同时发生许多删除操作。

function deleteUser(userid) {
		deleteButton.addEventListener('click', function(userid){
			var deleteData = userid;

			// Delete the record
			$.ajax({
				method: 'POST',
				url: 'delete-user-action.php',
				data: deleteData,
				success: function(){
					console.log('user was successfully deleted');
				}
			})
		})
}

我明白为什么会发生这种情况，因为每次调用函数时事件监听器都会附加自身。所以我决定像这样把它移到外面:

function deleteUser(userid) {
  console.log('i have access to id in this function');
}

    deleteButton.addEventListener('click', function(userid){
        // How can I get access to userid from deleteUser function?
        var deleteData = userid;

        // Delete the record
        $.ajax({
            method: 'POST',
            url: 'delete-user-action.php',
            data: deleteData,
            success: function(){
                console.log('user was successfully deleted');
            }
        })
    })

所以我的问题是，我怎样才能访问 deleteUser 参数 userid 而不会导致发生多个删除操作？

此外，这是我在服务器上用来获取 id 的 php 代码:

<i class="fas fa-edit" data-toggle="modal" data-target="#editModal" id="'.$item['mem_id'].'"></i> <i class="fas fa-trash" data-toggle="modal" data-target="#deleteModal" onclick='."deleteUser('".$item['mem_id']."')".' id="'.$item['mem_id'].'"></i>

Answer 1

我建议通过 data- 将整数值从 dom 传递到 javascript属性。

id属性不能以数字开头。 我不建议使用纯数字元素 ID——它们在 html 文档的范围内失去了上下文/意义。 data-id ，例如，可以只是一个整数。例如... data-id={$item['mem_id']} ...'

一旦你有了 $this您可以使用的元素，只需使用 $(this).data('id') ajax 调用中的值。

这里增加的便利是您不需要从传递的值中去除任何字符(在 js 或 php 中)。