2

试图找出正确的方法来使单击事件不会在禁用链接的图标上触发。问题是当您单击图标时，它会触发单击事件。我需要选择器包含子对象（我认为），以便在启用链接时单击它们触发事件，但在禁用父对象时需要排除子对象。

链接在页面加载后动态设置禁用属性。这就是我使用 .on 的原因

此处演示：（新链接，忘记将链接设置为禁用）

http://jsfiddle.net/f5Ytj/9/

<div class="container">
    <div class="hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
        <p>
            <a class="btn" disabled>
                <i class="icon-file"></i>
                Test
            </a>
        </p>
    </div>
</diV>​

$('.btn').on('click', ':not([disabled])', function () { alert("test"); });​

更新： 我觉得我没有正确使用 .on ，因为它没有考虑 $('.btn') ，只搜索子事件。所以我发现自己在做类似$('someParentElement').onor之类的事情$('body').on，因为它假设元素出现在特定上下文中（有人移动链接，现在 javascript 中断），所以更难维护，而我认为第二种方法效率低下。

这是第二个在启用/禁用情况下都能正常工作的示例，但我觉得必须首先选择父元素真的很糟糕，因为如果有人重新排列页面布局，事件将中断：

http://jsfiddle.net/f5Ytj/32/

4

6 回答 6

1 
.on('click', ':not([disabled])'

^ 这意味着，由于 icon 是 button 的子元素".btn"，并且它没有被禁用，因此该函数将执行。

也可以禁用图标，或者仅将事件侦听器应用于<a>您的按钮标签，或者使用e.stopPropagation();

我建议使用e.stopPropagation();，这应该可以防止图标响应点击。

这似乎对我不起作用^

但是，禁用图标。

于 2012-11-28T19:20:55.887 回答
1

您没有正确使用选择器。

$('.btn').not('[disabled]').on('click', function () { 
    alert("test"); 
});​

看到它住在这里。

编辑：

$('.container').on('click', '.btn:not([disabled])', function () { 
    alert("test"); 
});​
于 2012-11-28T19:23:44.067 回答
1

我更愿意在此处使用委托添加事件，因为您尝试基于元素的属性来创建事件。

您可以添加检查条件以查看是否要运行代码。

$('.container').on('click', '.btn', function() {
    if( $(this).attr('disabled') !== 'disabled'){
        alert('test!!');
    }
});​

检查小提琴

于 2012-11-28T19:27:32.457 回答
1

如果您只想监听.btn元素本身的点击，请不要使用事件委托：

$('.btn').on('click', function() { 
    if (!this.hasAttribute("disabled"))
        alert("test");
});​

如果您使用事件委托，则按钮需要是匹配元素：

$(someParent).on('click', '.btn:not([disabled])', function(e) {
    alert('test!!');
});​

或者使用button真正可以禁用的 true ：

<button class="btn" [disabled]><span class="file-icon" /> Test</button>

在这里，禁用时根本不会触发 click 事件，因为它是一个适当的表单元素，而不是一个简单的锚点。只需使用

$('.btn').on('click', function() { 
    if (!this.disabled) // check actually not needed
        this.diabled = true;
    var that = this;
    // async action:
    setTimeout(function() {
        that.disabled = false;
    }, 1000);
});​
于 2012-11-28T19:32:13.110 回答
0

我认为你需要的是：

e.stopPropagation();

见：http ://api.jquery.com/event.stopPropagation/

于 2012-11-28T19:20:30.940 回答
0

基本上像下面这样的东西应该工作

$('.icon-file').on('click', function(event){event.stopPropagation();});

您可能希望添加一些逻辑，以便仅在禁用按钮时停止冒泡事件。

更新：

不确定，但这个选择器应该可以工作：

$('.btn:disabled .icon-file')
于 2012-11-28T19:44:43.330 回答