<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>453</td>
<td>Nick James</td>
<td>12/9/2016</td>
</tr>
</tbody>
JS
$('body').on('click','#myTable tbody',function(e){
alert('do something');
});
I have checkbox within my table row, how do I delegate it form above's click event? I do not want the event to be occur when I click on the checkbox.
To perform the functionality only when target type is not checkbox
$(document).ready(function(){
$('body').on('click','#myTable tbody',function(e){
if(e.target.type!='checkbox')
alert('do something');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>453</td>
<td>Nick James</td>
<td>12/9/2016</td>
</tr>
</tbody>
</table>
You can check if the target is checkbox and prevent further execution:
$(document).ready(function(){
$('body').on('click','#myTable tbody',function(e){
if($(e.target).is(':checkbox'))
{
return;
}
alert('do something');
});
})
Check this Fiddle
Use stop event.stopPropagation() to prevent the click on inner element to bubble across the parents.
$('body').on('click','#myTable tbody input[type="checkbox"]',function(event){
event.stopPropagation();
});
$('body').on('click','#myTable tbody',function(e){
alert('do something');
});
Now the alert will come only when you click on anywhere inside the table, which is not a input[type="checkbox"].
try this
You can use Jquery not and has selectors to achieve this
$('body').on('click','#myTable tbody td:not("td:has(input[type=checkbox])")',function(event){
alert('do something');
});
Working FIDDLE
Related
How do I disable click on all grid cells except one cell in a row? I am trying to disable clicks on any cell in the grid, when a cell enters the edit mode. So I tried:
$('#QCStatus tr td').bind('click',function() {
return false;
});
//QCStatus is the id of the grid
To enable click on a cell, in the same row that is being edited, I tried:
$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
return true;
});
But this doesn't have any effect as click is disabled by the first snippet. What is the correct way to achieve this?
You can exclude the selected row it with :not() here:
$('#QCStatus tr:not(.selected) td').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
<tr><td>click</td></tr>
<tr class='selected'><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
</table>
<pre></pre>
This will bind the click on all the tds which are not the children of tr.selected.
As per your comment you can add more:
How could I just exclude the td in the selected row td[aria-describedby="QCStatus_ActionIcons"]?
$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
Use event.stoppropagation() for element to be eliminated for click event. It prevents further propagation of the current event.
$('tr').on('click', function() {
console.log('clicked!');
});
$('.disabled').on('click', function(e) {
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
</table>
Fiddle here
add a "disabled" attribute to those buttons where you want to disable the click.
for a div disabled attribute doesn't work.
in those cases use "pointer-events:none;" in your css of that particular divs.
I want to hide all <tr> of the table except on which I clicked.
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td><i class="delete">delete </i></td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td><i class="delete">delete </i></td>
</tr>
</table>
On click of delete button hide all rows except current.
Jquery code:-
$(document).ready(function () {
$('table tbody tr').siblings().not($(this)).hide();
});
Please suggest me.
Use siblings as follow:
See the comments inline in code:
// Bind click event on `tr` inside `table`
$('table').on('click', 'tr', function () {
// Show current `tr` and hide others
$(this).siblings().hide();
});
Demo: http://jsfiddle.net/tusharj/LL0c2efg/
You need to run your code under a click event handler, not when the page loads. Also note that .not(this) is redundant when using siblings() as the originating element would not be included anyway. Try this:
$(document).ready(function() {
$('table tbody tr').click(function() {
$(this).siblings().hide();
});
});
Example fiddle
$(document).ready(function () {
$('table tbody tr').click(function(){
$('table tbody tr').hide();
$(this).show();
})
});
DEMO
I am currently highlighting a table row when selected but in one of the cells I have a button. When I click the button I am triggering the table row click event. Is it possible to seperate the two?
My two calls currently look like this:
$('table.table-striped tbody tr').on('click', function () {
$(this).find('td').toggleClass('row_highlight_css');
});
$(".email-user").click(function(e) {
e.preventDefault();
alert("Button Clicked");
});
My HTML looks like this:
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>col-1</th>
<th>col-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Data</td>
<td><button class="btn btn-mini btn-success email-user" id="email_123" type="button">Email User</button></td>
</tr>
</tbody>
</table>
Any idea how I might stop the button click event from triggering the row click event?
You have to use stopPropagation:
$(".email-user").click(function(e) {
e.preventDefault();
e.stopPropagation();
alert("Button Clicked");
});
(See also : What's the difference between event.stopPropagation and event.preventDefault?)
I believe this is caused by event bubbling, try using e.stopPropagation(); just after e.preventDefault();
Try this:
$('.table-striped').find('tr').on('click', function() {
$(this).find('td').toggleClass('row_highlight_css');
});
$(".email-user").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
I handling the click with following code.
Table with input
<table>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
Click handler
$('table tr').click(function(){
alert('clicked');
});
http://jsfiddle.net/n96eW/
It's working well, but if I have a checkbox in the td, it's handling it too when clicked.
Is there a way to handle the click of the TR but not trigger on the child elements?
http://jsfiddle.net/n96eW/1/
Add another event handler in your checkbox to stopPropagation:
$('table tr').click(function(){
alert('clicked');
});
$('table tr input').click(function(e) {
e.stopPropagation();
});
You can check event.target to filter your events:
$('table tr').click(function(e){
if(e.target.tagName.toLowerCase() != "input") {
alert('clicked');
}
});
You could also use
$("tr").on('click',function() {
if (!$(event.target).is('input'))
alert('clicked');
});
I have the following code:
$("#Table1 tbody").children().each(function(e){
$(this).bind('click',
function(){
// Do something here
},
false)
});
The Table1 html table has 2 columns; one for Names and one for a <button> element.
When I click on a table row, it works fine. When I click on the button, the button code fires; however, so does the row code.
How can I filter the selector so the button doesn't trigger the parent element's click event?
This is what you want.
It's stopPropogation that will stop the parents.
<table>
<tr>
<td>The TD: <input type="button" id="anotherThing" value="dothis"></td>
</tr>
</table>
<div id="results">
Results:
</div>
<script>
$(function() {
$('#anotherThing').click(function(event) {
$('#results').append('button clicked<br>');
event.stopPropagation();
});
$('td').click(function() {
$('#results').append('td clicked<br>');
});
});
</script>
Here's a link to an example of it working as well:
http://jsbin.com/uyuwi
You can tinker with it at: http://jsbin.com/uyuwi/edit
You could also do something like this:
$('#Table1 tr').bind('click', function(ev) {
return rowClick($(this), ev);
}); //Bind the tr click
$('#Table1 input').bind('click', function(ev) {
return buttonClick($(this), ev);
}) //Bind the button clicks
function rowClick(item, ev) {
alert(item.attr('id'));
return true;
}
function buttonClick(item, ev) {
alert(item.attr('id'));
ev.stopPropagation();
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Table1">
<tbody>
<tr id="tr1">
<td>
The TD: <input type="button" id="button1" value="dothis" />
</td>
</tr>
<tr id="tr2">
<td>
The TD: <input type="button" id="Button2" value="dothis" />
</td>
</tr>
</tbody>
</table>
Is it possible to remove the button code and just run the row code, therefore kind of using event bubbling.
Another couple options:
can you add a class to the TD that has the button in it and in the selector, do '[class!="className"]'
maybe try event.preventDefault(). You can see it being used here. this way you can prevent the default action that is triggered when the button is clicked, although I'm not sure if it will completely prevent the bubbling.