2

更新：这在最新版本的 firefox (15.0.1) 中不起作用：http: //jsfiddle.net/DerNalia/NdrNV/5/

点击复选框导航到谷歌......但它不应该:(

似乎添加 e.stopPropagation() 没有帮助/不起作用。

游戏区：http : //jsfiddle.net/DerNalia/NdrNV/1/

我正在尝试做的事情：当我单击锚旁边（但实际上是其子元素）的复选框时，它应该更改状态，并更改“其他”复选框的状态。

但是因为锚点调用了 e.preventDefault() ，所以该复选框永远不会被选中。

这是我的标记

<a href="#">Link Name <input class="home" type="checkbox"/></a>
<br />
Sync'd checkbox: <input class="other" type="checkbox" />​

这是一些陷入困境的jquery

$(function() {
    $("input.home").click(function() {
        $("input.other").click();
    });

    $("a").click(function(e) {
        e.preventDefault();
        // prevent default so we can do some ajaxy things instead of follow the href
    });
})​

那么，如何更改锚标记上的 jQuery 单击操作，以便单击传播到子元素（但我仍然可以在没有浏览器跟随锚标记的 href 的情况下执行 ajaxy 操作）？

有没有办法在不更改标记的情况下做到这一点？（现在的方式对我的 Web 应用程序具有语义意义）

4

3 回答 3

1

您可以像这样放置条件 e.target.tagName，

 if(e.target.tagName == 'A')        
       e.preventDefault();

现场演示

$(function() {
    $("input.home").click(function() {
        $("input.other").click();
    });

    $("a").click(function(e) {
        if(e.target.tagName == 'A')        
           e.preventDefault();      


        // prevent default so we can do some ajaxy things instead of follow the href
    });
})​
于 2012-08-13T15:26:45.867 回答
1

它不起作用，因为event.preventDefault会取消活动。

使用 e.preventDefault 单击checkbox其中包含的内容<a>不会让您更改复选框状态。

我能想到的一种解决方法是在不同的上下文中设置复选框状态，以使e.preventDefault代码无效。

演示：http: //jsfiddle.net/NdrNV/10/

$(function() {
    $("input.home").click(function() {
        $("input.other").click();
    });

    $("a").click(function(e) {
        e.preventDefault();

        var setCheckbox = function() {
            var checkbox = $(e.target)[0];
            checkbox.checked = checkbox.checked?false:true;
        }

        if ($(e.target).is(':checkbox')) {
            setTimeout(setCheckbox, 0);
        }

    });
})

注意：这是一种解决方法。

于 2012-09-19T19:36:29.760 回答
0 
$(function() {
        $("input.home").click(function() {
            if($(this).attr('checked') == 'checked')
                $(this).removeAttr('checked');
            else                               
                $(this).attr('checked', 'checked');
            $("input.other").click();
        });

    $("a").click(function(e) {
        e.preventDefault();
        // prevent default so we can do some ajaxy things instead of follow the href

        var target = e.target; // object that triggers the event
        $(target).children().trigger('click');
    });
});
于 2012-08-13T15:17:07.967 回答