Question

尝试具有用户单击垃圾桶图标时的位置的功能，弹出一个模版，询问他们是否确定是否要删除。如果选择“是”，则将执行删除操作。

但是，我很难解决的问题是将我的id从具有参数的函数传递给我的另一个匿名函数事件侦听器，该函数包含包含userid的参数，该侦听器侦听是否单击了删除按钮。

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

例如，第一个删除可以正常工作，我再次删除，一次将执行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的整数值从dom传递到javascript。

id属性不能以数字开头。例如，data-id可以简单地是一个整数。例如... data-id={$item['mem_id']} ...'

一旦您拥有$this元素，就可以在ajax调用中使用$(this).data('id')值。

这里增加的便利是您不需要从传递的值中剥离任何字符（在js或php中）。

Answer 2

首先，您将要使用Unobtrusive JavaScript，并将df %>% group_by(x1, x2) %>% count %>% {sum(.$n)} [1] 6替换为事件侦听器，因为您似乎已经在这样做了。

第二，我注意到您正在为编辑和删除图标将ID作为onclick参数输出。这是无效的标记，将导致问题。相反，我建议在该操作之前添加ID：

id

现在，考虑到要将有问题的<i class="fas fa-edit" ... id="edit_<?php echo $item['mem_id']; ?>"> // edit_1 <i class="fas fa-delete" ... id="delete_<?php echo $item['mem_id']; ?>"> // delete_1输出到要单击的元素的userid字段中，根本就不需要id函数；只需使用deleteUser来获取删除元素本身的ID：

this.id

var deleteButton = document.getElementById('delete_1');

deleteButton.addEventListener('click', function() {
  var deleteData = this.id;
  console.log(deleteData);

  /*
  $.ajax({
    method: 'POST',
    url: 'delete-user-action.php',
    data: deleteData,
    success: function() {
      console.log('user was successfully deleted');
    }
  })
  */
})

将ID从一个函数传递给事件侦听器函数以确认删除操作

2 个答案: