テーブル行の子要素からjqueryクリックイベントハンドラを削除する

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> 

myButtonをクリックしたときを除いて、jqueryのクリックイベントが機能するようにします。

誰もがアイデアを持っていますか？

あなたのTD内部リンクを見つけようと、それが見つかった場合、リンクが機能してまいりますので、それはtrueを返します

Answer 1

myButtonクラス要素の伝播を停止できませんでしたか？

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

はここでTDクリックがリンクをクリックするとき以外は、作業をトリガーする方法を示して簡略化jsFiddle example使用してコードです。

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) 
    } 
}) 

。 （リンクが「クリック」アクションを実行しないようにする場合はfalseを返します）

jsFiddleに簡単な例を作成しました。

あなたは.live

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

.onへ

​​を変更する場合は、.stopPropagationは.liveを使用せずに動作する別の例を見ることができる.stopPropagationを使用することができますが。 jQuery1.7でのみ動作します+

Answer 3

私は、メソッドの開始時にイベントソースを取得し、それが私が期待していたものでない場合に返すことによって行います。たとえば

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

クリックされた要素のタイプを返します。あなたがボタンの場合は停止するように見えます。