2

我想禁用单击预览中的链接并显示错误消息。我想出了一个简单的解决方案:

<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 小提琴:http: //jsfiddle.net/bseQQ/

4

4 回答 4

3

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

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

这应该适合你的事业:)

代码

$(document).on('click','a', function () {
    alert("links are disabled");
    return false;
});
于 2013-10-15T10:14:49.337 回答
3

你最好使用事件委托

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

这里#preview用作静态父元素。

于 2013-10-15T10:15:04.697 回答
3

要捕获动态元素上的事件,您需要使用委托选择器:

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

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

于 2013-10-15T10:15:06.860 回答
0
$('#btn').click(function () {
    $('#preview ul').append('<li><p><a href="http://google.com">another link</a></p></li>');
});
于 2013-10-15T10:23:28.450 回答