使用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

您可以单击处理程序检查按钮是否被点击通过检查event.target财产

$(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

你必须ckeck的event传递给click功能的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>