顯示與jQuery的內嵌確認

我正在嘗試爲鏈接創建一個'Are you sure'確認，類似於reddit文章上的報告按鈕。單擊時，鏈接將替換爲「您確定是/否」，其中「是」將執行操作，「否」將恢復鏈接。我可以使用確認替換鏈接，但無法獲得「否」鏈接以隱藏確認。顯示與jQuery的內嵌確認

相關的代碼：

<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>

來源

2012-09-09 improv32

我認爲，更好的辦法是在HTML中包括所有的鏈接，只顯示或隱藏js沒有任何jQuery的DOM操作。 –

的#unconfirm元件不會在DOM當時存在的情況下被執行的結合。您需要進一步委託的事件處理程序了DOM樹：

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

這使用.on()方法，其將結合事件處理程序選定的元素（document），但如果該事件起源於只執行處理函數在匹配第二個參數的元素（#unconfirm）上。

請注意，在jQuery 1.7中添加了.on()。如果您遇到較舊的版本，則可以使用.delegate()代替。

另請注意，將document替換爲其他祖先元素會更高效（因爲此時事件的距離較短，直到觸發委派的事件處理程序）。

來源

2012-09-09 08:48:45

它仍然沒有工作，但我可能做得不對，我把'$（document）.on（）'調用放到我的'$（）'調用中，是正確的嗎？ – improv32

@ improv32 - 下面是一個工作示例：http://jsfiddle.net/jamesallardice/Xrc5t/ –

由於您#unconfirm元素是動態生成的，你需要使用代表團on()附加事件：

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

來源

2012-09-09 08:49:27 elclanrs

顯示與jQuery的內嵌確認

回答

相關問題