We Keep Coding

Dynamic row added to table: adding click event doesn't trigger

Brain ache.
I have a timer that dynamically adds row to a table. I want an event to fire
when the user clicks on one of the dynamically added rows.
I'm tagging each for with a class of "PortletTableUseButton" and using the .on("click") but it doesn't work.
$('.PortletTableUseButton').on("click", function () {
alert($(this));
});
setInterval(function () { addRow(); }, 2000);
var counter = 2042;
function addRow() {
counter++;
var myRow = "<tr class='PortletTableUseButton'><td>BLOCK-" + counter + "</td><td>Location A</td><td >Use</td></tr>";
$("#Portlet #content tr:last").after(myRow);
}
<div id="Portlet" style="position:absolute; top:500px;left:500px; height:200px;">
<div id="content" style="height:80%;">
<table id="PortletTable">
<tr>
<td>File Name</td>
<td>Location</td>
<td>Action</td>
</tr>
</table>
</div>
</div>

You aren't using event delegation correctly. Try this:
$(document).on('click', '.PortletTableUseButton', function () { ... });
http://learn.jquery.com/events/event-delegation/
Alternatively, run your click function each time you add a row.

Selecting a table row to have a click event includes the children in Firefox

I have a table row that contains a link in it. I set the entire row to one link and in Chrome the row goes to the link I set it to and the child link takes the user to the correct link. in Firefox both the row and the child go to the link that is set on the row. How can I get this to be consistent in both Firefox and Chrome. I am setting the row to go to the link by using the following jquery
$('.table tbody tr, !a').click(function () {
$.pjax({
url: $(this).find('td a.row-click').attr('href'),
container: '#update_panel'
});
});
And the row's html looks like this
<tr>
<td>
Main Tire Set
</td>
<td>
<a class="js-pjax" href="/Events/TireSets?tireGroupID=d09fb958-d008-e211-aa97-d067e53b2ed6">Sets</a>
</td>
<td>
<a class="js-pjax" href="/Events/TireBuilder?tireSetGroupID=d09fb958-d008-e211-aa97-d067e53b2ed6">Tire List</a>
</td>
<td>
<ins class="icon-remove"></ins>
</td>
<td style="display: none;">
<a class="row-click" href="/Events/TireInfoListView?tireSetGroupID=d09fb958-d008-e211-aa97-d067e53b2ed6">Details</a>
</td>
</tr>

I ended up having to check in the click function if it was a row. i.e.
$('.table tbody tr').click(function (event) {
if (event.target.localName == 'td') {
$.pjax({
url: $(this).find('td a.row-click').attr('href'),
container: '#update_panel'
});
}
});

How to get row of element in cell by javascript/jquery?

I have a simple table like this
<table id="tempTable">
<tbody>
<tr id="row_01">
<td>
<button onclick="btnclick(this);" >Save Row</button>
</td>
</tr>
<tr id="row_02">
<td>
<button onclick="btnclick(this);" >Save Row</button>
</td>
</tr>
</tbody>
</table>
function btnclick(e) {
var currentRow = $(e).parent().parent();
alert(currentRow.id);
}
I want to determine which row where the button clicked was placed. So I use some jquery method in btnclick() as you see abow. But sometime I don't know how deep level the button was placed in row (), so Im looking for a way to get an ancestor by tag <tr> of a element.
Anybody help me, thanks?

Try this :
function btnclick(e) {
var currentRow = $(e).closest('tr');
alert(currentRow.id);
}
The closest() function will return the closest ancestor referenced by its selector. In this case the selector is simple a <tr> element.
Taken from the jQuery docs :
.closest( selector )
Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.
A better method could be used if you change your HTML a little bit. If you placed the same class on each of your buttons.
Eg :
<td>
<button class="myBtnClass" >Save Row</button>
</td>
Then your jQuery would look like this :
$(".myBtnClass").on('click',function(){
var currentRow = $(this).closest('tr');
alert(currentRow.attr('id'));
});
This function will capture a click on any element with the .myBtnClass class.

The jQuery way is:
$('#tempTable').find('button').click(function() {
var currentRow = $(this).closest('tr');
});

how about using closest
function btnclick(e) {
var currentRow = $(e).closest('tr');
alert(currentRow.id);
}

jQuery Table Row Click Event also firing when i click a link

Here is what i have so far, getting the row number is working great but i need to make it so that when i click on the link in the table, it doesnt fire the code inside the function.
<table>
<tr class="row">
<td>A</td>
<td><a class="link" href="foo.html">Foo</a></td>
</tr>
<tr class="row">
<td>B</td>
<td><a class="link" href="Bar.html">Bar</a></td>
</tr>
</table>
<script>
$(function(){
$('.row:not(.link)').click(function(){
var $row = $(this).index();
});
});
</script>

The selector .row:not(.link) will select all elements that have a class "row" and don't have the class "link", which is not what you are looking for.
You need to use event.stopPropagation within the click event of the a.link elements so that the click event is not propagated to the parents, which includes row.
Try this:
<table>
<tr class="row">
<td>A</td>
<td><a class="link" href="foo.html">Foo</a></td>
</tr>
<tr class="row">
<td>B</td>
<td><a class="link" href="Bar.html">Bar</a></td>
</tr>
</table>
<script>
$(function(){
$('.row').click(function(){
var $row = $(this).index();
});
$('.row .link').click(function(e){
e.stopPropagation();
});
});
</script>

Just a bit late, but this is first link in Google I opened in search for solution to relative topic. So, it may become useful for someone:
$(".clickableRow").click(function(e) {
if (e.target.nodeName != "A") {
window.document.location = $(this).attr("href");
}
});
Links in a row, I mean standart , will work as usual, and this example markup will have three independent link activations:
<tr class="clickablerow" href="profile.html">
<td>John Doe, the VP</td>
<td>PrintChat</td>
</tr>

Heres a quick fix in jquery, just use instanceof
$("#news-table tr").click(function(e){
if((e.srcElement instanceof HTMLAnchorElement)!=true )console.log("IIIIIIHA HA!");
});

You need to prevent event propagation in the click event of the links - here's a sample: http://jsfiddle.net/6t8u7/1/
As you can see, clicking on the link just fires one event. Clicking on the row fires the other event.
The reason you're getting the current behaviour is that the click event from the link "bubbles up" to the parent element.

With a data attribute, there's no need for a class:
$(document).on('click', '[data-href]', function(e) {
if($(e.target).hasClass('ignore'))
return;
var ignore = ['input', 'a', 'button', 'textarea', 'label'];
var clicked = e.target.nodeName.toLowerCase();
if($.inArray(clicked, ignore) > -1)
return;
window.location = $(this).data('href');
});
Usage example (tr is just an example - you can use div, etc):
<tr data-href="your_url">
<td class="ignore">Go nowhere</td>
<td>Go to your_url</td>
<td>Go to another_url</td>
<td><input type="text" value="Go nowhere"></td>
</tr>

You can also use this without explicitly selecting the row in the second function.
$(function(){
$('.row').click(function(){
var $row = $(this).index();
});
$('.link').click(function(event){
event.preventDefault();
event.stopPropagation();
});
});

Just add: if (e.target.tagName == 'A') return; to row click and Link element will use its own logic.
Here is more detailed example:
$("#table tr").click(function(e) {
// Skip if clicked on <a> element
if (e.target.tagName == 'A') return;
// Logic for tr click ...
});

Also can be usable (especially if you use href with span or other nested items in href):
$(".row").click(function(e) {
var hasHref = $(e.target).closest('td').find('a').length;
if (! hasHref) {
window.document.location = $(this).data("href");
}
});

jQuery Children selector question

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.