2

我正在尝试为链接创建一个“你确定”确认，类似于 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>
4

2 回答 2

5

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

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

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

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

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

于 2012-09-09T08:48:45.837 回答
1

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

$(closestStaticParent).on('click', '#unconfirm', function() { ... })
于 2012-09-09T08:49:27.243 回答