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

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

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

这应符合您的原因:)

<强>码

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

Answer 2

您最好使用event delegation：

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

此处#preview用作静态父元素。

Answer 3

要捕获动态元素上的事件，您需要使用委派选择器：

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

这是因为事件是在加载时附加的，显然动态元素在那时不存在。委托事件附加到父元素，但仅在过滤的选择器通过DOM引发事件时触发。

Answer 4

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

如何在添加新链接后禁用链接？

4 个答案: