Question

我有一个替换复选框的span元素，所以我可以设置它的样式。我还有一个标签标签;单击时，它应该触发span的click事件，就好像用户刚刚单击了span元素一样。换句话说 - 我正在使用label / span模仿标签/复选框关系。

此功能适用于Firefox和Chrome，但不适用于IE。在IE 7和8中，单击标签不会执行任何操作，并且似乎在源中生成了一些奇怪的属性：

<span class="checkbox" id="Vechicle-1" jQuery15105041923284548672="2"/>
<label class="large text-left" for="Vechicle-1" jQuery15105041923284548672="24">

在IE 9中，我没有看到附加的jQuery字符串，并且点击标签的2x将触发跨度的点击事件。

$('.checkbox').click(function () {
    $(this).toggleClass('checked');

    if ($(this).hasClass('checked')) {
        $('#checkbox-' + $(this).attr('id')).attr('checked', 'checked');
    } else {
        $('#checkbox-' + $(this).attr('id')).removeAttr('checked');
    }
});

$('label').click(function () {
    $('#' + $(this).attr('for')).click();
});

知道是什么导致了这种行为吗？

Answer 1

也许点击事件向上冒泡并触发您可能拥有的其他代码，尝试通过将代码更改为阻止它：

$('.checkbox').click(function (event) {
    event.preventDefault();
    $(this).toggleClass('checked');
    //......

对于其他点击处理程序也一样。

编辑：找到了这种行为的根源。事实证明，IE浏览器“let”标签也会影响非表单元素，包括<span>，这意味着单击label元素将触发ID定义为标签{{1}的元素的click事件属性 - 无论元素类型是什么。

Chrome（可能还有Firefox）会让它只触发复选框等表单元素，如预期的那样。

可以找到here的证据，只需浏览IE浏览器（甚至9），即使jQuery线被评论，也可以在点击标签时看到“点击”。（小提琴中的代码与原始问题中的相同）

所有这些归结为有趣的结论：点击标签导致跨度被点击两次 - 一次是浏览器，另一次是jQuery代码，导致它切换状态两次。

Answer 2

另一种选择是将您的$('.checkbox').click代码放在外部函数中，然后在用户单击复选框或标签时调用该函数：

function checkboxClick(checkboxElement){
    checkboxElement.toggleClass('checked');

    if (checkboxElement.hasClass('checked')) {
        $('#checkbox-' + checkboxElement.attr('id')).attr('checked', 'checked');
    } else {
        $('#checkbox-' + checkboxElement.attr('id')).removeAttr('checked');
    }

}

$('.checkbox').click(function () {
    checkboxClick($(this));            
});

$('label').click(function () {
    checkboxClick($('#' + $(this).attr('for')));
});

Answer 3

而不是获取for属性并找到元素。您可以尝试使用prev方法，该方法会为您提供span元素和调用click方法。

$('label').click(function () {
    $(this).prev().click();
});

Answer 4

IE尝试设置通过javascript检查的属性并没有很好的表现，这个bug一直困扰着我。我能够解决这个问题的简单方法是完全删除inout元素，并用一个新的输入元素替换它，其中设置了属性checked =“checked”并且有效。

var $checkedItem= $(selectorForCheckedBox)


$checkedItem.clone().addAttr("checked","checked").insertAfter('span.checkbox');
$checkedItem.detach();  //$checkedItem.remove() use it appropriately.

希望这会有所帮助。 lemme knoe如果你找到一个更容易的解决方案..评论会有所帮助//

IE中奇怪的jQuery行为

4 个答案: