如何在添加新鏈接後禁用鏈接？

Question

我想禁用點擊預覽中的鏈接並改爲顯示錯誤消息。我想出了一個簡單的解決方案：

<div id="preview"> 
<p>There is a <a href="http://google.com">sample</a> link that should not follow to <a href="http://google.com">google.com</a></p> 
<ul></ul>  
</div> 

<button id="btn">Add a new link</button> 

JavaScript代碼：

$('a').on('click', function() { 
    alert("links are disabled"); 
    return false; 
}); 

$('#btn').on('click', function() { 
    $('#preview ul').append('<li><p><a href="http://google.com">another link</a></p></li>'); 
}); 

它適用於已有的鏈接，但不是通過按鈕添加新的鏈接完美的罰款。

甚至添加新的鏈接後如何禁用鏈接？

我想保持邏輯禁用了代碼的鏈接，添加新的鏈接（因爲是添加新的鏈接多個地方）

JS fidddle：http://jsfiddle.net/bseQQ/

Answer 1

爲了捕捉動態元素的事件，你需要使用委派的選擇：

$('#preview').on('click', 'a', function() { 
    alert("links are disabled"); 
    return false; 
}); 

這是因爲活動連接上的負載，顯然動態元素不會在這一點上存在。委託事件附加到父元素，但只有在過濾器選擇器通過DOM將事件冒泡時纔會觸發。

Answer 2

工作演示http://jsfiddle.net/P6Hbg/

API：.on - http://api.jquery.com/on/

這應該適合你的事業:)

代碼

$(document).on('click','a', function() { 
    alert("links are disabled"); 
    return false; 
}); 

Answer 3

你最好使用event delegation：

$('#preview').on('click', 'a', function() { 
    alert('links are disabled'); 
    return false; 
}); 

這裏#preview用作靜態父元素。

Answer 4

$('#btn').click(function() { 
    $('#preview ul').append('<li><p><a href="http://google.com">another link</a></p></li>'); 
});