使用 jQuery 显示内联确认答案

【问题标题】：Showing inline confirmation with jQuery使用 jQuery 显示内联确认
【发布时间】：2012-09-09 16:51:27
【问题描述】：

我正在尝试为链接创建一个“你确定”确认，类似于 reddit 帖子上的报告按钮上的那个。单击时，链接将替换为文本“您确定是/否”，其中“是”将执行操作，“否”将恢复链接。我可以用确认替换链接，但无法获得“否”链接来隐藏确认。

相关代码：

<span id="confirm"><a href="#>Confirm</a></span>


<script type="text/javascript">
$(function() {

   $("#confirm").click(function() {
     $(this).html('Are you sure? <a href="#">Yes</a> / <a id="unconfirm" href="#">No</a>');
   });

   $("#unconfirm").click(function() {
     $(this).parents("span").html('<a href="#">Confirm</a>');
   });

 });
</script>

【问题讨论】：

我认为，更好的解决方案是在 html 中包含所有链接，并使用 js 显示或隐藏它们，无需任何 jquery DOM 操作。

标签： javascript jquery html web

【解决方案1】：

在执行事件绑定时，DOM 中不存在 #unconfirm 元素。您需要将事件处理程序委托给 DOM 树的更上层：

$(document).on("click", "#unconfirm", function() {
    $(this).parents("span").html('<a href="#">Confirm</a>');
});

这使用.on() 方法，它将事件处理程序绑定到选定元素（document），但仅当事件源自与第二个参数（#unconfirm）匹配的元素时才执行处理程序函数。

请注意，.on() 是在 jQuery 1.7 中添加的。如果您卡在旧版本上，可以改用.delegate()。

另请注意，将document 替换为其他一些祖先元素会更有效（从那时起，事件在触发委托事件处理程序之前的传播距离更短）。

【讨论】：

它仍然无法正常工作，但我可能做错了，我将$(document).on() 调用放入我的$() 调用中，对吗？

【解决方案2】：

由于您的#unconfirm 元素是动态生成的，您需要使用on() 的委托来附加事件：

$(closestStaticParent).on('click', '#unconfirm', function() { ... })

【讨论】：