Question

我有一个垃圾桶的图标，用于Django网站上的删除按钮。

它只是一个带有i标签的锚标签，其href设置为传递模型元素id的删除视图。

它工作得很好，但我想创建一个对话框弹出窗口，在删除之前要求确认。

我已经看到了一些方法，但它们都需要输入而不是锚。

我也需要在触摸设备上进行这项工作。

如何将其更改为输入元素并将图标保持为按钮而不是显示提交按钮。如何弹出对话框，单击是时，将正确的URL和ID传递给提交？

非常感谢任何建议。

Answer 1

最简单的方法是添加确认提示：

<a ... onclick="return confirm('Are you sure you want to delete this?')">Delete</a>

但你不应该使用内联javascript，所以尝试添加一个类并将其抽象出来。这是jquery：

<a class="confirm-delete" ...>Delete</a>
$(document).on('click', '.confirm-delete', function(){
    return confirm('Are you sure you want to delete this?');
})

Answer 2

让这成为您的锚标记：

<a class="icon-trash" id="delete-object" data-object-id="{{ object.id }}">Delete</a>

请注意，我们object.id有一个属性。我们将在javascript部分中需要它。

你可以在body标签关闭之前在页面底部写下这样的内容：

使用SNIPPET更新

您可以在此尝试演示。在body标记关闭之前将代码放在正确位置时，它应该可以正常工作：

var elm = document.getElementById('delete-object');
var objectID = elm.getAttribute('data-object-id');
var resultDiv = document.getElementById('result');
elm.addEventListener('click', function() {
  var ask = confirm('r u sure?');
  if (ask && objectID) {
    var r = "Page will be redirected to </object/delete/" + objectID + "/>";
    resultDiv.textContent = r;
  } else {
    resultDiv.textContent = "User cancelled the dialog box...";
  }
  return false;
});

.delete-link {
  background-color: red;
  color: white;
  border: 1px solid white;
  cursor: pointer;
  padding: 3px;
}
#result {
  margin: 20px;
  padding: 10px;
  border: 1px solid orange;
}

<a class="delete-link" id="delete-object" data-object-id="3">Delete</a>
<div id="result"></div>

Django删除确认

2 个答案: