Question

我的第一列有一个复选框。当我单击该行的任何位置时，将在表行上设置“row_selected”类，并选中该复选框。代码如下：

$('#my_table > tbody > tr > td').live('click', function() {
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

问题是某些表格单元格有按钮，如果单击这些按钮，我不希望该行被选中。即。

<tr>
    <td class="checkbox">
        <input type="checkbox" checked="false"/>
    </td>
    <td>blah<td>
    <td>
        <a class="myButton">do stuff</a>
    </td>
    <td>blah<td>
</tr>

我希望jquery click事件能够工作，除非我点击myButton。

有人有任何想法吗？

Answer 1

难道你不能在myButton类元素上停止传播吗？

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

这是一个简化的 jsFiddle example ，使用您的代码显示td点击触发器的工作方式，除非点击链接。

Answer 2

$('#my_table > tbody > tr > td').live('click', function() {
    if ($(this).children('a.myButton').length) return true; // prevents click on link
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

你试图在你的td中找到一个链接，如果它发现它将返回true，那么链接将继续工作。（如果您不希望链接执行“单击”操作，则返回false）

在jsFiddle上创建了一个简单示例。

如果您将.stopPropagation更改为.live

，则可以使用.on

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

$('#my_table > tbody > tr > td').on('click', function() {
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

Here您可以看到.stopPropagation在不使用.live的情况下工作的不同示例。它只适用于jQuery1.7 +

Answer 3

我是通过在方法开始时获取事件源并返回，如果它不是我期望的那样。例如

function getEventSrc(e)
{
    var eventIsFiredFromElement = e.target;
    if(eventIsFiredFromElement==null)
    {
        // I.E.
        eventIsFiredFromElement = e.srcElement;
    }
    return(eventIsFiredFromElement.type);
}

返回单击的元素类型。看起来你想停下来，如果它是一个按钮。

$('#my_table > tbody > tr > td').live('click', function(ev) {
    // Make sure event is not comming from a button.
    if(getEventSrc(ev) == 'button'){return;}

    if ($(this).children('a.myButton').length) return true; // prevents click on link
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

从表行的子元素中删除jquery click事件处理程序

3 个答案: