如何防止动态创建的锚点出现默认值

Question

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

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

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

示例如下https://jsfiddle.net/dyLa915b/1/

Answer 1

你应该把 event.preventDefault() 放在你的逻辑之前。这是一个例子：-

var $links = $('.deleteTask');

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <li>  
    <a class="deleteTask" href="www.google.com">Google</a>
  </li>
  <li>  
    <a class="deleteTask" href="www.youtube.com">Youtube</a>
  </li>
</div>

Answer 2

您可以使用 delegate for do it. delegate used for dynamic elements. please see this similar post.

Answer 3

您应该更改三件事。

1st：您在同一页面上对多个 ID tasks 使用了相同的 ID，这是错误的。 ID属性在一个DOM中应该是唯一的。所以你应该使用 class 而不是 id。然后你应该使用 class 作为 jQuery.

的选择器

2nd：您说这些元素是动态创建的，因此 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.
    }
});

如何防止动态创建的锚点出现默认值

How to preventDefault on dynamically created anchors

javascript

jquery

dynamically-generated

preventdefault