從表格行的子元素中刪除jquery點擊事件處理程序

我有一個表格，第一列有複選框。當我點擊該行的任何地方時，表格行上會設置一個'row_selected'類，並且複選框被選中。代碼如下：從表格行的子元素中刪除jquery點擊事件處理程序

$('#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點擊事件工作除了當我點擊myButton。

有人有什麼想法嗎？

來源

2012-04-20 Steve Walsh

難道你不能只停止在myButton類元素上的傳播嗎？

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

這裏有一個簡單的使用jsFiddle example你的代碼演示了TD點擊如何觸發工作點擊鏈接時除外。

來源

2012-04-20 16:44:37 j08691

添加了另一種解決方案，您不應該使用stopPropagation，因爲他正在使用.live，因爲它在此處顯示：http://api.jquery.com/event.stopPropagation/ – 2012-04-20 16:52:04

在您的示例中沒有點擊的作品。 – 2012-04-20 16:58:01

@GuilhermeDaviddaCosta - 當然可以。幾次點擊第一次，然後觀察複選框切換。 – j08691 2012-04-20 16:58:44

$('#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) 
    } 
})

你可以看到一個不同的例子，其中.stopPropagation作品不使用.live。它只能用於jQuery1.7 +

來源

2012-04-20 16:37:48

「從jQuery 1.7開始，不推薦使用.live（）方法，使用.on（）方法附加事件處理程序。」 - [http://api.jquery.com/live/]（http://pi.jquery.com/live/)(http://api.jquery.com/live/） – Sampson 2012-04-20 16:39:34

感謝您的更新，OP使用直播，我複製他的代碼只是爲了改變一些事情。 – 2012-04-20 16:42:02

使用'.on' – 2012-04-20 17:17:46

我通過在方法開始時獲取事件源並返回，如果它不是我所期望的。例如

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-20 17:00:56

從表格行的子元素中刪除jquery點擊事件處理程序

回答

相關問題