Javascript 如何防止在动态创建的锚点上使用默认值

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

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

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

---

下面是一个示例

您应该将event.preventDefault（）放在逻辑之前。以下是一个例子：-

var$links=$（'.deleteTask'）；
$links.off（'click'）。on（'click'，函数（$event）{
$event.preventDefault（）；
$event.stopPropagation（）；
如果（！confirm（'你确定吗？'））{
//做事
};
});





您应该将event.preventDefault（）放在逻辑之前。以下是一个例子：-


var$links=$（'.deleteTask'）；
$links.off（'click'）。on（'click'，函数（$event）{
$event.preventDefault（）；
$event.stopPropagation（）；
如果（！confirm（'你确定吗？'））{
//做事
};
});





你可以用它来做<代码>委托
用于动态元素。请参阅。
您可以用它来做<代码>委托

用于动态元素。请看。

有三件事你应该改变

第一：您在同一页上使用相同的id作为id数

任务

，这是错误的。ID属性在一个DOM中应该是唯一的。所以您应该使用class来代替

id

。然后您应该将该类用作jQuery的选择器

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

第三：在jQuery函数的第一行写入

preventDefault

因此，最终更新的代码是：

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

---

有三件事你应该改变

第一：您在同一页上使用相同的id作为id数

任务

，这是错误的。ID属性在一个DOM中应该是唯一的。所以您应该使用class来代替

id

。然后您应该将该类用作jQuery的选择器

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

第三：在jQuery函数的第一行写入

preventDefault

因此，最终更新的代码是：

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

---

on和delegate之间有什么不同？应该是一样的。不是吗？on和delegate有什么不同？应该是一样的。不是吗？我检查你的指纹时发现了你的错误。我注意到，当您在

deleteteTask

类上定义click event jquery函数时，您正在用

delete

类添加

标记。这是错误的。因此，考虑到

class=“delete”

是一个真正的类值，我更新了我的代码。我也用JSFIDLE检查了它，它按照您的要求工作。我检查您的JSFIDLE时发现了您的错误。我注意到，当您在

deleteteTask

类上定义click event jquery函数时，您正在用

delete

类添加

标记。这是错误的。因此，考虑到

class=“delete”

是一个真正的类值，我更新了我的代码。我也用JSFIDLE检查了它，它的工作符合您的要求。