2

我有一个表格，第一列上有一个复选框。当我单击行上的任意位置时，会在表行上设置一个类“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)
    }
})

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

<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 单击事件能够正常工作，除非我单击 myButton。

有人有什么想法吗？

4

3 回答 3

5

难道你不能停止对 myButton 类元素的传播吗？

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

这是一个使用您的代码的简化jsFiddle 示例，该示例显示了 td 单击触发器的工作原理，除非单击链接。

于 2012-04-20T16:44:37.640 回答
1 
$('#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)
    }
})

Where you try to find a link inside your td and if it finds it will return true so the link will continue working. (return false if you don't want the link to be performing the "click" action)

Created a simple example on jsFiddle.

Although you could use .stopPropagation if you change .live to .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 you can see a different example where .stopPropagation works without using .live. It will work only with jQuery1.7+

于 2012-04-20T16:37:48.860 回答
1

我通过在方法开始时获取事件源并在它不是我所期望的情况下返回来做到这一点。例如

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)
    }
})
于 2012-04-20T17:00:56.373 回答