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();
}
});
}

How to disable onclick function from child selector using javascript

How can i make sure that onclick events only fires by clicking on td not on the span ?
<td style="cursor: pointer;" onclick="getDetails(13,3)">
<span class="responsiveExpander"></span>
TEST
</td>
function getDetails(table_id,id)
{
alert(table_id + id);
}

You have to add an event listener to the inner child and cancel the propagation of the event.
In plain JS something like
document.getElementById('inner').addEventListner('click',function (e){
e.stopPropagation();
});
is sufficient. Note that jQuery provides the same facility:
$(".inner-div").click(function(event){
event.stopPropagation();
});
or
$(".inner-inner").on('click',function(event){
event.stopPropagation();
});

Assuming you want to prevent clicks on all sub-elements, pass the event to getDetails and have it see if event.currentTarget is the same as event.target.
function getDetails(event, table_id, id) {
if (event.currentTarget !== event.target) {
return; // clicked a sub-element
}
alert(table_id + id);
}
span {
color: red;
}
<table>
<tr>
<td style="cursor: pointer;" onclick="getDetails(event, 13,3)">
<span class="responsiveExpander">SHOULD NOT ALERT</span>
TEST
</td>
</tr>
</table>

You may do as follows;
data.addEventListener("click", function(e){
e.target === this && console.log("td clicked");
});
td {border: red solid 2px;}
span{color: white; background-color: black}
<table>
<tr>
<td id="data" style="cursor: pointer">
<span>SPAN:</span> TEST
</td>
</tr>
</table>

Adding click event to markup I can't edit

I am not able to edit any of the following markup and I am trying to add a click event to the .datepick-days-cell element.
<td class="datepick-days-cell onclick="jQuery.datepick._selectDay(this,'#calendar_booking5',1493179200000)" ></td>
I tried the following simple jQuery on click event but had no luck:
$('.datepick-days-cell').on('click', function() {
alert('test click');
});
I'm assuming this does not work because it can't take precedence over the event handler that is bound to the element. Any ideas?

Following worked for me:
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$('.datepick-days-cell').on('click',function() {
alert('test click');
});
});
</script>
<table border="1">
<tr>
<td class="datepick-days-cell" onclick="jQuery.datepick._selectDay(this,'#calendar_booking5',1493179200000)" >Test Click</td>
</tr>
</table>

Does this work?
$('.datepick-days-cell').click(function() {
alert('test click');
});

Passing values of table data to javascript function

I want to pass values of table row td to the javascript function onclick on the tooltip.
Please find the fiddle http://jsfiddle.net/0w9yo8x6/16/
When i mouse over on image in the row, tooltip is shown and when clicked on test on the tooltip, javascript function is invoked.I want to pass the value of the row to the javascript function whenever we click on the tooltip.Please suggest.
We can achieve this using td onclick event , but my scenario is different.when clicked on the tooltip the row on which we clicked that corresponding value should pass to javascript function.
<table class="tooltipTable" style="position:absolute;">
<tr><td> <span onclick="test()">test</span></td></tr>
</table>
<br/><br><br>
<table border="1">
<tr>
<td>Data1 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data2 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data3 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
</table>

I'm guessing this is what you're talking about.
var display = function() {
var tooltip = [Create Tooltip Element];
// Style tooltip etc.
tooltip.addEventListener("click", function() {
test(this.parentNode.innerHTML); // Test parent's inner HTML.
}, false);
}
Hope this helps, let me know if I've misunderstood.

I believe this is what you are looking for I took the liberty of modifying your HTML a little bit. I added an id to the test and the display spans in your tooltip table. Here is the javascript tooltip
$(function() {
var rowData;
$(document).tooltip({
items: "img, [data-title]",
content: function () {
var element = $(this);
if (element.is("img"))
{
rowdata = element.attr("data-title");
$(document).off('click', '#test');
$(document).on('click', '#test', function() {
test(rowdata);
});
$(document).off('click', '#display');
$(document).on('click', '#display', function() {
display(rowdata);
});
}
return $(this).prop('title');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(1000, 1);
},
function () {
$(this).stop(true).fadeOut(200, function () {
$(this).remove();
})
});
},
position: {
my: "left",
at: "right"
}
});
});
There are improvements you can make to the javascript but the essential idea is captured in the logic.

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');
});