We Keep Coding

jQuery event delegation html table issue

I'm having an issue using jQuery event delegation on a html table.
My html table contains a click button on each row which open an additional html window using jQuery. The event works to open the window however the close event does not.
ps: I want to use jQuery event delegation as I add new row in my table after having already bound the above listener.
here is a jsfiddle.
$(".list").on("click", "[data-window-open]", function(e) {
e.preventDefault();
e.stopPropagation();
var targeted_popup_class = $(this).attr('data-window-open');
$('div[data-window="' + targeted_popup_class + '"]:first').toggle();
});
$(".list").on("click", "[data-window-close]", function(e) {
e.preventDefault();
if ($(".window").is(":visible")) {
$(".window").hide();
}
});
.window {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="list">
<tr>
<th>name</th>
<th>more</th>
</tr>
<!-- Popup Window 1 -->
<div class="window" data-window="1">
Ryan Sanchez
close
</div>
<tr>
<td>Ryan</td>
<td>click</td>
</tr>
<!-- Popup Window 2 -->
<div class="window" data-window="2">
Pascal Reventon
close
</div>
<tr>
<td>Pascal</td>
<td>click</td>
</tr>
</table>

Change the selectors of the handlers:
$("[data-window-open]").on("click", function(e)
And
$("[data-window-close]").on("click", function(e)

I made the close event as a function which is working with default and added rows.
$(".list").on("click","[data-window-open]", function(e)
{
e.preventDefault();
e.stopPropagation();
var targeted_popup_class = $(this).attr('data-window-open');
$('div[data-window="' + targeted_popup_class + '"]:first').toggle();
closeWindow();
});
function closeWindow()
{
$("[data-window-close]").on("click", function(e)
{
e.preventDefault();
if($(".window").is(":visible"))
{
$(".window").hide();
}
});
}

Event not triggering on dynamically generated element

I have a table and in that table I have given a button to user in first column of every row to delete the row and that delete button is dynamically generated when user enter the mouse on first column and this is the code
$('table').on('mouseover', "td.y-id", function () {
$(this).append($('<a class="dlt-x" style="float: right; cursor: pointer; cursor: hand;"> <i class="fa fa-trash"></i> </a>'));
});
$('table').on('mouseleave', "td.y-id", function () {
$('.dlt-x').remove();
});
and I registered an event to click of delete button like this
$('table').on('click', 'a.dlt-x', function () {
alert("clicked");
});
and this event is not triggering. I look other similar questions and try all the solutions find there related delegated binding but can't solve the problem.

If you are triggering for dynamic element. Use like below
$('body').on('click',"#dynamic_element_id",function(){
// you code
})

To stop appending the same element append if it does not exist
$(function() {
$('table').on('mouseover', "td.y-id", function (e) {
if ($('.dlt-x').length === 0) {
$(this).append($('<a class="dlt-x" style="float: right; cursor: pointer;">X</a>'));
}
});
$('table').on('mouseleave', "td.y-id", function () {
$('.dlt-x').remove();
});
$('table').on('click', 'a.dlt-x', function () {
alert("clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class='y-id'>1</td>
</tr>
<tr>
<td class='y-id'>2</td>
</tr>
</table>

Change the event listener to mouseenter instead. Otherwise you'll keep appending that element if you move the mouse inside.
$('table').on('mouseenter', "td.y-id", function() {
$(this).append($('<a class="dlt-x" style="float: right; cursor: pointer; cursor: hand;"> <i class="fa fa-trash"></i> </a>'));
});
$('table').on('mouseleave', "td.y-id", function() {
$('.dlt-x').remove();
});
$('table').on('click', 'a.dlt-x', function() {
alert("clicked");
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td class="y-id">Delete</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td class="y-id">Delete</td>
</tr>
</table>

Perform any action events on react render HTML

I am rendering Html in react JS that is:
return (
<div>
<table id="displaydata">
<td className="update_record"><a href={"http://localhost/PHP-React-Demo/update_record.html?id=" + d.id}><img className="edit" src="http://localhost/PHP-React-Demo/images/edit_logo1.png"/></a></td>
<td className="delete_record"><input id="closeAuction" type="image" className="delete" src="http://localhost/PHP-React-Demo/images/delete-button.png"/></td>
</tr>
)}
)}
</table>
</div>
)
And now I want perform JQuery actions on click of image. I have tried for onClick and now trying the following JQuery code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('#closeAuction').click(function() {
location.reload();
});
});
</script>
This JQuery code but it shows nothing. Only html rendered the action is not performing.

Instead of this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('#closeAuction').click(function() {
location.reload();
});
});
</script>
Try this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#closeAuction').click(function() {
location.reload();
});
});
</script>

Change your code to this-
$(document).ready(function() {
$(document).on('click', '#closeAuction', function() {
location.reload();
});
});
But ideally you should not be needing jQuery anymore with React.

Button within clickable table cell

I have a table cell which is clickable and fires a jQuery event when clicked. Within that cell I also have a button, which has another jQuery event when clicked. The issue is, when the button is clicked both the cell and button events are fired.
For example:
<script>
$(document).ready(function () {
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function () {
alert('button clicked');
});
});
</script>
<table>
<tr>
<td id="cell">
<button id="button">go</button>
</td>
</tr>
</table>
How can I prevent the cell click event being fired when the button is clicked?

You can use stopPropagation() which allow you to stop bubbling of event to the parent dom.
Example
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
set the table width to 100% and test it.
Test Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
});
</script>
<table width="100%">
<tr>
<td id="cell">
<button id="button">go</button>
</td>
</tr>
</table>

stop the event propagation which is called event bubbling to the parent:
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});

You need to use
stopPropagation
This example should fix it:
$(document).ready(function () {
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
});
That should fix it.

$(document).ready(function(){
$('#cell').click(function(event){
if($(event.target).is('#button')){
event.stopPropagation();
}
});
});

Jquery: how to trigger td a when tr is clicked

I have a table where the first td in the trs contains a link. I want this anchor to be triggered (clicked) no matter where i click in the containing tr.
I have read and tried alot of recents post and suggentions on this topic but i can't get this to work. I tried the trigger() and triggerHandle() functions, but it does not trigger the anchor click that i want.
There must be others who have had the need to trigger a anchor click when a tr is clicked, so that the user doesn't have to click the tds anchor link. It sure is a nice UI feature if its possible?
Here is the code i have tried:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascripts/jquery-1.4.2.js"></script>
<script type="text/javascript" charset="utf-8">
/* Initialise the table with the required column sorting data types */
jQuery(document).ready(function () {
jQuery("#rowClick tr").click(function (e) {
jQuery("#clickevent", this).trigger("click");
});
});
</script>
</head>
<body id="dt_example">
<table id="rowClick">
<thead>
<tr>
<th style="width: 30px">id</th>
<th style="width: 200px">navn</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jesper</td>
</tr>
<tr>
<td>2</td>
<td>Bjarne</td>
</tr>
<tr>
<td>3</td>
<td>Søren</td>
</tr>
</tbody>
</table>
</body>

Following on from naugtur and Alessandro; with the tds changed to have a class of 'clickevent':
$(document).ready(function () {
$("#rowClick tr").click(function (e) {
document.location.href = $(this).find(".clickevent").attr('href');
});
});

triggering clicks on a to reload the page is unavaliable due to security reasons.
try this way:
document.location.href=$aintd.attr('href');
$aintd is the a element You found

jQuery("#rowClick tr").click(function (e) {
jQuery(this).find('td:first a').click();
});
I should add that naugtur is correct in that this won't take you to another page, but anything that happens on the page itself will work fine.

Yeah, x1a4 is right. And remove the ids "clickevent" from your tds; the id attribute must be "a primary key" for a DOM element.

try the following
$("#rowClick tr").click(function (e) {
$(this).find('td:first a').trigger('click');
});