We Keep Coding

How to specify an onclick parameter in jQuery?

I'm having a tough time using jQuery to give a button the ability to delete it's own row. Specifically, I the selection process find extremely confusing.
The table has an id of foo and the button has a class of 'delete. Shouldn't the following code select the button? It's just the ****.on('click', function(event){}) part that I am struggling to understand. I just want the button created to be selected to have the on response.
$('#foo tr:last').after(`<tr id="1"><td>fname</td>
<td>lname</td>
<td>pnumber</td>
<td>address</td>
<td><button class="delete" id="1" type="click">Delete</button></td>`)
$("#foo .delete").on('click', function(event) {
event.preventDefault()
let rowID = event.target.id
if (rowID !== '') {
$(`#foo,#${rowID}`)[1].remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="foo">
<tr></tr>
</table>

Read this Jquery doc https://learn.jquery.com/events/event-delegation/
$(document).on('click', "#foo .delete", function(event){
//do something here
})

Disable click fot td for particular column using Jquery

I have tried to use Jquery to click a table row to go to a new page. But my last column has a button. For which clicking on the edge takes it to a new page. Anyway to disable the td onclick for that column. I tried using onclick='event.stopPropagation();return false;' but that would disable the button too.
My Jquery code below.
$(".myTable").on("click", "td", function(){
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id='+issueid;
});

This can be handled in two ways:
Try adding event.preventDefault() along with event.stopPropagation().
Add a disabled class on the td element manually and then handle further scenarios with hasClass('disabled') check.

The issue is because the click event from the button propagates up the DOM to the tr which then transfers the page.
To fix this you could call stopPropagation() within the button event handler:
$(".myTable").on("click", "td", function() {
var issueid = $(this).closest('tr').data('issue');
console.log('Transferring to: viewminissues.jsp?issue_id=' + issueid);
//window.location.assign('viewminissues.jsp?issue_id=' + issueid);
});
$('.myTable').on('click', 'button', function(e) {
e.stopPropagation();
console.log('Perform button action...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable">
<tr data-issue="1">
<td>Foo bar</td>
<td><button>Edit</button></td>
</tr>
<tr data-issue="2">
<td>Lorem ipsum</td>
<td><button>Edit</button></td>
</tr>
</table>

You can exclude the last <td> from the click() event using :not(:last) like this:
$(".myTable").on("click", "td:not(:last)", function() {
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id=' + issueid;
});

how to get the td clicked having tr

I have a tr with a click listener. I want to know which td was the one clicked:
<tr class ="clickingClass">
<td> first td </td>
<td> second td </td>
</tr>
$(".clickingClass").on('click', function() {
$(this).closest('td');
});
The above shows nothing. How can I do this?

The issue is because closest() goes up the DOM, not down it.
To do what you require you could instead attach the event handler directly on the td elements:
$(".clickingClass td").on('click', function() {
// do something with $(this)...
});
Alternatively you could use the target property of the event passed to the handler function to determine which td was clicked:
$(".clickingClass").on('click', function(e) {
// do something with $(e.target)...
});

You can use event.target for this
$(".clickingClass").on('click',function(event){
alert(event.target);
});

Why not bind to the tds instead?
$(".clickingClass td").on('click',function(){
this //td
});

Binding events to table cells using jQuery

This is my markup:
<div id="divContainer">
<div>
<table></table>
</div>
<div>
<table></table>
</div>
....
</div>
I need to to register mouseenter event on all tds of all the tables (that are present inside each div).
$(document).ready(function () {
$allTds = $('#divContainer').find("tr").find("td");
...
SomeFunction();
});
function SomeFunction(){
$allTds.on({
mouseenter: function (e) {
alert('hover');
}
});
}
But I don't get any alerts.

They way you apply the event listener is weird.
$('#divContainer').on('mouseenter','td',function() {
alert('mouse entered');
});
Also: It's good that you cache the td elements, but why don't you stick with something more simple?
$allTd = $('#divContainer td');

The reason your event handlers aren't being bound is that the <td> elements don't exist when you enter the document ready handler.
You should use event delegation for this. For example
window.jQuery(function($) {
$('#divContainer').on({
mouseenter: function(e) {
alert('hover');
}
}, 'td');
});
This way, it's the #divContainer element that listens for the events and acts on them if they originate from a <td>.
See http://api.jquery.com/on/#direct-and-delegated-events
You also had a scoping problem where the $allTds variable is only defined in the document ready handler and is not in scope of the SomeFunction function.

jQuery - Click event on <tr> elements with in a table and getting <td> element values

I have the following HTML in a JSP file:
<div class="custList">
<table class="dataGrid">
<c:forEach var="cust" items="${custList}">
<tr>
<td>${cust.number}</td>
<td>${cust.description}</td>
<td>${cust.type}</td>
<td>${cust.status}</td>
</tr>
</c:forEach>
</table>
</div>
I need to be able to trigger a 'click' event on each of the dynamically created <tr> tags and also be able to access the values of the <td> tags (of the clicked <tr>) from within the JavaScript function. I have this function already, but sadly it doesn't seem to be working.
$(document).ready(function() {
$("div.custList > table > tr").live('click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
Update (Jan 2016): jQuery.live is deprecated (as noted here:http://api.jquery.com/live/)
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers.

Unless otherwise definied (<tfoot>, <thead>), browsers put <tr> implicitly in a <tbody>.
You need to put a > tbody in between > table and > tr:
$("div.custList > table > tbody > tr")
Alternatively, you can also be less strict in selecting the rows (the > denotes the immediate child):
$("div.custList table tr")
That said, you can get the immediate <td> children there by $(this).children('td').

Try jQuery's delegate() function, like so:
$(document).ready(function(){
$("div.custList table").delegate('tr', 'click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
A delegate works in the same way as live() except that live() cannot be applied to chained items, whereas delegate() allows you to specify an element within an element to act on.

This work for me!
$(document).ready(function() {
$(document).on("click", "#tableId tbody tr", function() {
//some think
});
});

Since TR elements wrap the TD elements, what you're actually clicking is the TD (it then bubbles up to the TR) so you can simplify your selector. Getting the values is easier this way too, the clicked TD is this, the TR that wraps it is this.parent
Change your javascript code to the following:
$(document).ready(function() {
$(".dataGrid td").click(function() {
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
//get <td> element values here!!??
});
});​

$("body").on("click", "#tableid tr", function () {
debugger
alert($(this).text());
});
$("body").on("click", "#tableid td", function () {
debugger
alert($(this).text());
});

$(this).find('td') will give you an array of td's in the tr.

<script>
jQuery(document).ready(function() {
jQuery("tr").click(function(){
alert("Click! "+ jQuery(this).find('td').html());
});
});
</script>