jQueryでクリック可能な行を作成し、子要素を除外します

Question

私はクリック可能にしたい行があるテーブルを持っていますが、押されたときに別の操作を行う必要があるボタンもあります。

HTML：

<table> 
    <tr data-url="link.html"> 
     <td>Some Text Value <input type="button" value="Submit" onclick="otherFunction()"></td> 
    </tr> 
    <tr data-url="link2.html"> 
     <td>Some Text Value <input type="button" value="Submit" onclick="otherFunction()"></td> 
    </tr> 
    <tr data-url="link3.html"> 
     <td>Some Text Value <input type="button" value="Submit" onclick="otherFunction()"></td> 
    </tr> 
</table> 

jQueryの：私はボタンをクリックしたときに

$(document).ready(function() { 
    $('table tr:not(input)').click(function() { 
     var href = $(this).attr("data-url"); 
     if(href) { 
      //console.log('redirect to:' + href); 
      window.location = href; 
     } 
    }); 
}); 

現在のページはまだ任意の入力を除くjQueryのセレクタにもかかわらず、リダイレクトされます。 :notを間違って使用していますか？

Answer 1

あなたはボタンはあなたがclick関数に渡さeventのtargetをckeckする必要が

$(document).ready(function() { 
 
    $('table tr').click(function(e) { 
 
    if ($(e.target).is(':button')) { 
 
     snippet.log('button clicked') 
 
     return; 
 
    } 
 

 
    snippet.log('row clicked'); 
 
    var href = $(this).attr("data-url"); 
 
    if (href) { 
 
     //console.log('redirect to:' + href); 
 
     window.location = href; 
 
    } 
 
    }); 
 
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr data-url="link.html"> 
 
    <td>Some Text Value 
 
     <input type="button" value="Submit" onclick="otherFunction()"> 
 
    </td> 
 
    </tr> 
 
    <tr data-url="link2.html"> 
 
    <td>Some Text Value 
 
     <input type="button" value="Submit" onclick="otherFunction()"> 
 
    </td> 
 
    </tr> 
 
    <tr data-url="link3.html"> 
 
    <td>Some Text Value 
 
     <input type="button" value="Submit" onclick="otherFunction()"> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

event.targetプロパティをチェックすることにより、クリックされたかどうかをクリックハンドラで確認することができます。ここで

は実施例である：

$(document).ready(function(){ 
 
    $(".clickablerow").click(function(event) { 
 
    if(event.target.tagName != "INPUT"){ 
 
     var href = $(this).attr("data-url"); 
 
     if(href) { 
 
     //console.log('redirect to:' + href); 
 
     window.location = href; 
 
     } 
 
    } 
 
    }); 
 
}); 
 

 
function otherFunction() { 
 
    alert("other function"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="clickablerow" data-url="link.html"> 
 
     <td>Some Text Value <input type="button" value="Submit" onclick="otherFunction()"></td> 
 
    </tr> 
 
    <tr class="clickablerow" data-url="link2.html"> 
 
     <td>Some Text Value <input type="button" value="Submit" onclick="otherFunction()"></td> 
 
    </tr> 
 
    <tr class="clickablerow" data-url="link3.html"> 
 
     <td>Some Text Value <input type="button" value="Submit" onclick="otherFunction()"></td> 
 
    </tr> 
 
</table>