用jQuery显示内联确认

Question

我正在尝试创建一个"你确定"的链接确认,类似于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>

Answer 1

#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用一些其他祖先元素替换会更有效(从那时起事件的行程距离就越小,直到它触发委托的事件处理程序).