Question

我有一个ID为 #tasks 的任务列表，其中包含每个列表元素旁边的类 .deleteTask 的删除锚点。此元素及其删除链接由ajax动态创建。因此，如果我想将一些处理程序挂钩到元素，我会像这样使用它：

$('#tasks').on('click', '.deleteTask', function (event)
{
    if( ! confirm('Are you sure?') ) event.preventDefault();
});

但似乎在点击父 #tasks 元素之前触发了类 .deleteTask 的锚定点击事件。所以我不能在上面调用preventDefault（）。我认为这是因为冒泡。但是如何在动态创建的锚点上触发preventDefault（）？

以下是示例https://jsfiddle.net/dyLa915b/1/

Answer 1

你应该改变三件事。

第1名：您在同一页面上使用相同的id来表示ID tasks的数量是错误的。 ID属性在一个DOM中应该是唯一的。所以你应该使用class id。然后你应该使用该类作为jQuery的选择器。

第二：你说这些元素是动态创建的，所以DOM不知道它们，因为当第一次呈现页面时它们不在DOM上。它们是在DOM准备好之后创建的。在这种情况下，您应该使用jQuery事件委派。

3rd：在jQuery函数的第一行写preventDefault。

所以最终更新的代码是：

$(document).on('click', '.delete', function (event)
{
    event.preventDefault();
    if( ! confirm('Are you sure?') ) {
          // Write code if user clicks `ok` button of confirmbox.
    }
});

Answer 2

您应该在您的逻辑之前放置event.preventDefault（）。这是一个例子： -

2 -> ['b' 'c']
5 -> ['f' 'g']

var $links = $('.deleteTask');

$links.off('click').on('click', function($event){
  $event.preventDefault();
  $event.stopPropagation();
  
  if( ! confirm('Are you sure?') ){
  // do stuff  
  };
  
});

Answer 3

您可以使用delegate来执行此操作。 delegate用于动态元素。请参阅this similar post。

如何防止动态创建锚点

3 个答案: