Question

现在我的HTML结构如下：

<a class="gallery-item" href="#">
    <div class="top">
        <div class="title"></div>
    </div>


    <div class="bottom">
        <div class="tags">
            <span class="weight"></span><br>
            <span><input type="checkbox" id="read" name="read" value="0"></span>
            <span class="date"></span>
        </div>
    </div>
</a>

我的问题是目前复选框没有改变，而是将我重定向到href。

我四处搜索并发现了一些可能预先运行的代码，但是，所有代码都阻止了复选框的检查或取消选中。

我尝试使用jQuery来实现这个功能，但是这仍然不会产生结果。

当前代码I使用，item在这种情况下是父元素。

$(item).click(function(e) {
    var sender = $(e.target);

    if (sender.prop("id") == "read") {
       var checked = $("#read", item).prop("checked");

       if (checked == true) {
           $("#read", item).prop("checked", false);
       } else {
           $("#read", item).prop("checked", true);
       }

       return false;
    }

    return true;
});

我还需要一种方法来触发复选框的.change()。

非常感谢任何帮助或建议。

Answer 1

当您单击stopPropagation()时，可以使用事件的input方法，以防止事件冒泡DOM并被a上的事件处理程序捕获，像这样：

$(item).find('input').on('click', function(e) {
    e.stopPropagation();
});

Working example

另请注意，点击处理程序中的逻辑比它需要的更复杂，因为它只是简单地切换子input。试试这个：

$('a').click(function(e) {
    $(this).find('input').prop('checked', function(i, p) {
        return !p;
    });
});

$('input').click(function(e) {
    e.stopPropagation();
});

Working example

您可以修改上面的选择器以符合您的特定要求。

Answer 2

现在我的HTML结构如下：[...]

您的问题是您正在创建无效的HTML - 在这种情况下，您无法预期可预测的行为。

content model for the a element是

透明，但必须没有interactive content后代。

input元素，如果不是hidden类型，是交互式内容 - 因此不允许作为a元素的后代。< / p>

所以你应该在这里做的第一件事是修复你错误的HTML代码。

单击锚元素的某个子元素时不要重定向

2 个答案: