Develop Reference

Why my table tr click function is not calling in jQuery? [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am trying to get the value of table row using jQuery. When I try the same jQuery code on console and after I try to click, that is selecting that row and give proper value what I expect. But I don't know why it is not running from my JavaScript file. But the other functions are working on the same JavaScript file
$(".chequeTable tbody tr").click(function() {
alert('Vendor ID ==');
$('.selected').removeClass('selected');
$(this).addClass("selected");
alert('Vendor ID ==' + $('.tdVendorID').html());
$(this).css("background-color", "#000000");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover FilterTable chequeTable table-striped" id="queryTable">
<thead>
<tr>
<th>S.No</th>
<th>VendorID</th>
<th>VendorName</th>
<th>ReqNo</th>
<th>ChequeAmount</th>
<th>VendorBalance</th>
<th>Balance</th>
<th>Description</th>
<th>StockValue</th>
<th>Yes/No</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="tdSno">1</td>
<td class="tdVendorID">6000 </td>
<td class="tdVendorName">john</td>
</tr>
</tbody>
</table>

Most probably the table is not there when you initialize the click event in jquery. Do you build the table dynamically?
Try to bind the click event to the table instead of the tr directly:
$(".chequeTable").on("click", "tr", function() { ... });
This only works when the table.chequeTable is in the HTML.
Some explanation why:
jquery documentation for on()
It says that it binds the events to all the elements in the selector. That means, elements that are not in the selector (any tr that is not yet present for example) won't receive the event. For that you have to bind the click Event on a container and check what the clicked subelement is. This is more perfomant anyways because you only attach one click Event and not 100s (if you have 100s tr-Elements)

Here you go with a solution
$("table.chequeTable").on('click', 'tr', function() {
alert('Vendor ID ==');
$('.selected').removeClass('selected');
$(this).addClass("selected");
alert('Vendor ID ==' + $('.tdVendorID').html());
$(this).css("background-color", "#000000");
});
$('tbody').append(`<tr class="">
<td class="tdSno">1</td>
<td class="tdVendorID">6000 </td>
<td class="tdVendorName">john</td>
</tr>`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover FilterTable chequeTable table-striped" id="queryTable">
<thead>
<tr>
<th>S.No</th>
<th>VendorID</th>
<th>VendorName</th>
<th>ReqNo</th>
<th>ChequeAmount</th>
<th>VendorBalance</th>
<th>Balance</th>
<th>Description</th>
<th>StockValue</th>
<th>Yes/No</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You need to do event delegation as your row are generated dynamically.
Reference Documentation: Event delegation
Hope this will help you.

Mouseenter not working for dynamic content

I have written a code where i need to trigger a functionality when mouse is over to specific elements.
Its working fine for below code for all static
$("table td").on("mouseenter",function(){
console.log("mouse entered")
});
but for all dynamic <td class="editcolumn">XYZ</td> event is not triggering even if i use below code
$("table td").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
Any idea how to make it work. I'm using jQuery 1.11

I know I just commented, but I figured I would show you an example:
HTML:
<table id="tablee" cellspacing="0">
<thead>
<tr class="tablehead">
<th>This</th>
<th>is</th>
<th>a</th>
<th>table</th>
<th>header</th>
<th>and</th>
<th>stuff</th>
<th>though</th>
</tr>
</thead>
<tr class="append">
<td class="edit-column">asdf</td>
<td class="edit-column">qwer</td>
<td class="edit-column">zxcv</td>
<td class="edit-column">rtyu</td>
<td class="edit-column">tyui</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">wert</td>
</tr>
<!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />
Javascript:
$(function() {
$('.add-column').click(function() {
$('.append').append("<td class='edit-column'>iueo</td>");
$('.tablehead').append("<th>Mo columns</th>");
});
/* vvv - this */
$("#tablee").on('mouseenter', '.edit-column', function() {
/* ^^^ should be children or a child of this */
$(this).css('background-color', 'yellow');
});
});
Here is a fiddle
This question's answer gives a much better explanation of delegated events.

I too faced a similar problem for dynamic elements that are added or removed. In such situations you can create dynamic elements with event-handlers attached to their attributes i.e. in your case you can put the desired operations in a function which gets called by your attribute event handlers:
It should be something like this:
Javascript:
function whenMouseEnters() {
// perform some operations
}
Html:
<td onmouseenter="whenMouseEnters()">

If table is aviable on DOM load you can write delgated event for the td with class editColumn like this:
$("table").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});

javascript how to remove loading gif from tbody table

I'm adding rows with javascript to this tbody
<div id="listingContainer"><div id="listing"><table class="table table-hover table-striped" id="listingTable"><tbody id="places"><img src="images/loading.gif"></tbody></table></div></div>
I tried this:
$("#places").html('');
but is adding to it
http://jsfiddle.net/sebababi/2JTPD/

It does not work cause
tbody does not accepts img tag as child element.
This is an example of valid table markup. Act accordingly
<table>
<tbody>
<tr>
<td id="places">
<img src="loading.gif">
</td>
</tr>
</tbody>
</table>
Note: The tbody is not necessary

First of all, you'll need your <img> tag to be within a <td> tag. Then use remove(); to get rid of the image like so:
HTML:
<tbody id="places">
<tr>
<td>
<img src=".../loading.gif">
</td>
</tr>
</tbody>
jQuery:
$("#places img").remove();
Here is fiddle: http://jsfiddle.net/2JTPD/29/

Looking for something like this?
http://jsfiddle.net/chace/2JTPD/28/
window.setTimeout(blahFunc,5000)
function blahFunc() {
$("#places").html('done');
}

Testing the RemoveNode DOM function

I have the following test html:
<table width="80%" border="0" cellspacing="0" cellpadding="1" >
<tr>
<td class="tableBorder">
<table id="scriptsT" name="scriptsT" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="4" class="tableTitle">› College Foo - ScriptList:</td>
</tr>
<tr class="rowHeaders">
<td width="4%">ScriptName</td>
<td width="2%">Main Script (Radio)</td>
<td width="2%">(Ext)</td>
<td width="2%">Del Script</td>
</tr>
<tr id="foo[1]" name="foo[1]" class="rowHeaders">
<td id="sTD" name="sTD" width="4%">Script1</td>
<td width="2%">
<input type="radio" name="main" id="main" value="">
</td>
<td id="tTD" name="tTD" width="2%">Php</td>
<td width="2%"><input type="Button" class="textbox" name="SelScript" id="" value="DelScript" onClick="javascript: DelScript(1); return false;"></td>
</tr>
</table>
</td>
</tr>
</table>
=======================================================
I'm trying to remove the node, using the "DelScript function, that tries to use an ID to select the given TR, based on each TR having a unique ID, in this case foo[1], etc..
In my test DelScript, I 1st get the table, and then try to get the childnode (the "TR") to delete.
//--handle/simulate the deletion of the tr in the scriptTBL for the id
function DelScript(id)
{
var scriptTBL=document.getElementById("scriptsT");
var a="foo["+id+"]"
var test=document.getElementById("foo[1]");
//scriptTBL.parentNode.removeChild(test);
scriptTBL.removeChild(test);
alert("foo");
var a;
}
However, I'm screwing something up, as I'm not able to delete the node.
I'm running FF4, and firefox seems to be saying the node can't be found (???).
I've also tried using the parentNode a well but get the same results.
Thank you for any pointers.

If you just want to
"delete the TR where the clicked 'delete' button is located"
You don't need any of those id attributes.
<input type="Button" onclick="DelScript(this);return false;">
function DelScript(theClickedButton) {
var tr = theClickedButton.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}

The table rows are not children of the <table>, they're children of the <tbody> element inside it. Even if there's not a <tbody> in your markup, there's one in the DOM. You could go up the DOM from the child element itself, or you could find the <tbody>
var tbody = document.getElementById('scriptsT').getElementsByTagName('tbody')[0];

FF is likely inserting a <tbody> element in between your <table> and <tr>, as the HTML specification demands. You don't even need to know the table ID. The attempt you commented out was almost right, but you need test.parentNode instead of table.parentNode - you want to get the row's parent node, not the table's:
function deleteRow(n){
var el = document.getElementById('foo['+n+']');
return el.parentNode.removeChild( el );
}

The TR is not a child of the TABLE. It is a child of the TBODY that is implicitly a child of the TABLE. Try this:
scriptTBL.children[0].removeChild(test);
Also, install FireBug so that you can browse the DOM tree and set breakpoints in your scripts to examine what they are doing to the dynamically rendered HTML.

How to select the <tr> which holds the <a> andchange the color

I have a table structure:
<table style="width: 100%;">
<tr>
<td>
one
</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>
Four
</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>
Seven
</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
CSS:
.yy
{
background-color: red;
}
Now the problem is if I click on the <a> its corresponding <tr> element (<tr> that holds the <a>) background should be red, again if I click on the same <a> it should come back to normal.
How to identify the the <tr> on which the <a> is clicked.
EDIT:
I tried:
$(".yy").not($(this).parent().parent()).removeClass("yy");
$(this).parent().parent().toggleClass("yy");
it worked.

$('a').live('click', function(){
$(this).parent().parent() //this is how you select the <tr> that the <a> is in
//first .parent() gets the <td> second .parent() gets the <tr>
});
Let me know if you need more. There might be a better way but I'm not positive.

I think closest() should get what you are looking for.
$('a').click(function() {
var tr = $(this).closest('tr');
tr.toggleClass('yy');
});
This way you do not have to assume anything about how nested the anchor is in the containing tr.
Example