Develop Reference

events not working after replacing an element with clone element

I replaced a div with the clone of another div, now I want to use the same button click events in the cloned div but the events are not working in the replaced div when I am using clone(true), any suggestion?
$(document).ready(function () {
var divClone = $("#col2").clone(true);
$("#bt1").click(function () {
$("#col2").appendTo("#col1");
$('#col3').load("data1.html");
});
$(document).on('click', '.clo', function (e) {
e.preventDefault();
$("#col3").replaceWith(divClone.clone(true));
});
});

How to avoid events on elements behind others in HTML and JavaScript/jQuery

I have a table with some div's inside it.
I want an event to happen when I click on a td element, but I also want an event to happen when I click on a div element.
As you can see in this fiddle http://jsfiddle.net/rkGkp/1/ my problem is, when I click on the div element, both the div and td event is triggered, but I only want the div's event to be triggered.
I use these event listeners
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function() {
alert("a td is clicked");
});
});
What can I do to avoid the element behind my div to trigger an event?

Have a look here: FIDDLE
I used stopPropagation()
CODE
$("#div").on("click", function(event) {
event.stopPropagation();
alert("a div is clicked");
});

This is the easiest way to achieve what you need. Simply check if the click target is on the div:
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function(e) {
if(!$(e.target).is("#div")){
alert("a td is clicked");
}
});
});

Table columns collapsed when button or image clicked using Javascript

I have this function which is responsible of making the table tr and th collapse. I want to collapse the table columns when button is clicked. I think because I am using $('tr th'),click(function() so when I clicking wherever in th it is collapsing. I want to collapse when we click the button or image like this (function myFunction(){}).
Here is my code:
$(window).load(function(){
$(function() {
$('table tbody tr:odd').addClass('alt');
$('table tbody tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$('tr th:not(:eq(0),:eq(1),:eq(2),:eq(3),:eq(4),:eq(5))').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});

why dont you add a onclick event on button instead of adding a click listener using jquery.
you can do something like
<button type="button" onclick="toggleExpand('anyReqParam1', 'anyReqParam2')" class="toggle"></button>
and in script define the function
<script>
function toggleExpand(anyReqParam1, anyReqParam2) {
// toggle code goes here
}
</script>
or alternatively you can also do
$(".toggle").click(function() {
});
using JQuery. Here toggle is the class name that i gave to the button

click event handler for span or td inside a table cell does not work

I am populating a table when my page is loaded. My rows are created like below:
$.each(datax, function() {
$.each(this, function(kx , vx) {
tbl_row += '<td><p id="' +'^'+$key1+':'+$keyval1 +'^'+$key2+':'+$keyval2 +'^'+$key3+':'+$keyval3 +'^'+$key4+':'+$keyval4 +'^'+$key5+':'+$keyval5+ '$$'+kx+':'+vx+ '">'+vx+'</p></td>';
tbl_labels += "<th>"+kx+"</th>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
tbl_head = "<tr>"+tbl_labels+"</tr>";
})
$("#table_results thead").html(tbl_head);
$("#table_results tbody").html(tbl_body);
$("#table_results").table("refresh");
It is working fine so far. The problem is, I want to handle click events for the table cells. I tried to put span and p inside the cells but the following handlers do not work
$("p").click(function (){
alert('handler for click p worked');
});
$("span").click(function (){
alert('handler for click span worked');
});
what am I doing wrong?

Try this code :
$(document).on('click', 'p', function (){
alert('handler for click p worked');
});
$(document).on('click', 'span', function (){
alert('handler for click span worked');
});
It is using the on method which detects event on element dinamically created.

You need to use event delegation here since the elements are added dynamically
$("#table_results").on('click', 'span', function(){
alert('handler for click span worked');
})
$("#table_results").on('click', 'p', function(){
alert('handler for click p worked');
})

Check code below (which alerts cell text):
$("#tbl tbody").find("p").on("click",function (){
alert($(this).text());
});
Working example: http://jsfiddle.net/kQpfE/

You bind events on elements created after the DOM is ready. You need to bind them from a parent DOM element who isn't generated after DOM ready.
So you should do something like :
$("#table_results tbody").find('span').click(function (){
alert('handler for click span worked');
});

Only select one row at a time using jquery

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.

Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help

While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');

Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i

You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.