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>
Related
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>
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');
});
i have a data table with a column like this
This is my HTML
<td class="orders-options column-invoice">
<strong>
<a class="row-title" href title="View detail">78060</a>
</strong>
<div class="locked-info"></div>
<div class="row-actions">
<span class="edit">Edit</span>
<span class="view">View</span>
</div>
</td>
I would like to show certain options like, "Edit" or "View" when user mouse over . My plan is to addclass on to so that it's visibility: changes hidden; to visible; according to CSS file.
This is my JS
$("td.orders-options").focusin(function() {
$(this).find(".row-actions").addClass('visible');
});
$("td.orders-options").focusout(function() {
$(this).find(".row-actions").removeClass('visible');
});
However this doesn't seem to have any effect on html.
Also I'm curious if this function will change class only in the that is focused or all on other that are not focused
You can use mouseover and mouseout or simple hover.
$("td.orders-options").mouseenter( function() {
$(this).find(".row-actions").addClass('visible');
}).mouseleave( function() {
$(this).find(".row-actions").removeClass('visible');
});
Also instead of visibility, toggle display property in css. Because visibility:hidden will take space though it's hidden.
In terms of hover, it will be like:
$("td.orders-options").hover( function() {
$(this).find(".row-actions").addClass('visible');
} ,function() {
$(this).find(".row-actions").removeClass('visible');
});
Update: Adding DEMO
$("td.orders-options").hover( function() {
console.log("Rias");
$(this).find(".row-actions").addClass('visible');
} ,function() {
$(this).find(".row-actions").removeClass('visible');
});
.row-actions.visible {
display: block;
}
.row-actions {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<table>
<td class="orders-options column-invoice">
<strong>
<a class="row-title" href title="View detail">78060</a>
</strong>
<div class="locked-info"></div>
<div class="row-actions">
<span class="edit">Edit</span>
<span class="view">View</span>
</div>
</td>
</table>
You should rather use .hover()..hover() method specifies two functions to run when the mouse pointer hovers over the selected elements:
$("td.orders-options").hover(function(){
$(this).find(".row-actions").addClass('visible');
},function(){
$(this).find(".row-actions").removeClass('visible');
});
Easily achieve your goal using toggelclass
$("td.orders-options").hover( function() {
$(this).find(".row-actions").toggleClass('visible');
});
Hey I have a very basic HTML code. There is some problem with the HTML event attributes. Check this code:
<td ><div id="id" onMouseover="show()" onMouseout="hide()">
<table width=100%>
<tr><td>hiiii</td></tr>
</table>
</div></td>
here's the script :
<script>
function show() { document.getElementById('id').style.visibility="visible"; }
function hide() { document.getElementById('id').style.visibility="hidden"; }
</script>
The output displays hiiii no matter what.
It's an issue with the scope of the html event handler attributes. There's two easy solutions:
Make the show and hide functions available in the global scope:
window.show = function () { document.getElementById('id').style.visibility="visible"; }
window.hide = function () { document.getElementById('id').style.visibility="hidden"; }
Or put the event handlers in your JavaScript code, instead of HTML attributes:
var div = document.getElementById('id');
div.onmouseover = show;
div.onmouseout = hide;
function show() { document.getElementById('id').style.visibility="visible"; }
function hide() { document.getElementById('id').style.visibility="hidden"; }
The onmouseover and onmouseout attributes should be in lower case.
So:
<div id="id" onmouseover="show()" onmouseout="hide()">
DEMO
<td>
<div id="id" onmouseover="show()" onmouseout="hide()">
<table width="100%">
<tr><td id="test">
hiiii
</td>
</tr>
</table>
</div>
</td>
function show() {
document.getElementById('test').style.visibility = "visible";
}
function hide() {
document.getElementById('test').style.visibility = "hidden";
}
See this Fiddle: http://jsfiddle.net/obnzbpmd/8/
When Div is hidden it doesn't call the JS hide() function. you need to set ID on the control ifself which you want to show/hide based on condition and assign event handlers on the Main Div element.
Hope this helps and hope this is what you are looking for!
well i am filling a table with php with values from DB
what i was trying to but unsuccessful didnt is to change the tr background color when image is clicked
here is what i tried to do
<script>
function changeColor(tr)
{
var tableRow = document.getElementById(tr);
tableRow.style.backgroundColor='red';
}
</script>
<html>
<table>
<tr id='tr<?php echo $personID;?>'>
<td>
<?php echo $personName;?>
</td>
<td>
<?php echo $personLastName;?>
</td>
<td>
<img src= "/*an image*/" onmouseover="" style="cursor: pointer;" onclick="changeColor('tr<?php echo $personID;?>')" >
</td>
</tr>
</table>
</html>
obiously this is just for one case but when i get elements from DB this table is pretty long
any ideas?
THANKS IN ADVANCE
one more thing
my table already has an css design where
td
{
background: #EDEDED;
}
tr:hover
{
background: #d0dafd;
}
this is maybe why when doing onclick="this.parentNode.parentNode.style.background='gray'"
is not working how can i fix this?
You could simply use parentNode : DEMO
<img src="http://dummyimage.com/50x50"
onmouseover="this.parentNode.parentNode.style.background='gray'"
onmouseout="this.parentNode.parentNode.style.background=''"
/>
img->parentNode=td -> parentNode=tr
jQuery code
//code for clicks
$('td img').click(function() {
$(this).closest('table').children('tr').removeClass('highlight');
$(this).closest('tr').addClass('highlight');
});
//code for hovering
$('tr').hover(function() {
//if the tr has the highlight class do nothing, otherwise add hover style
if(!$(this).hasClass('highlight')) {
$(this).addClass('hoverStyle');
}
}, function() {
//if the tr has hover style remove it when hover ends
if($(this).hasClass('hoverStyle')) {
$(this).removeClass('hoverStyle');
}
});
Then just make a CSS class to define the highlight style.