Can anyone let me know how to disable on click event for particular column.
Scenario : We displayed user details in a table , once click has been made on the table row, popup dialog window will appears with more details(Calling ajax request to retrieve details from database) . But our constraint is to disable on click event for single column associated with the table.
Eg :
<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td id = "disableClick"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>
If click has been made on text(1st and 2nd column) , it will invoke on click event . But if user clicks on hyper link (3rd column) , i want to redirecting it to Google but not on-click event(testing()).
Can anyone help me to achieve this .
try:
$(function() {
$('table td').on('click', function() {
if ($(this).index() == 2) {
return false; // disable 3rd column
}
});
$('table tr').on('click', function() {
alert('You click the row');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
do this through CSS
table td:nth-child(2) {
pointer-events: none;
}
How about adding your click events to the column, then removing the event once it has been clicked using .unbind(). This will remove the event of the column that was clicked, but any others should still work.
$( '.column' ).on( 'click', function()
{
// do ajax stuff...
// remove event
$( this ).unbind();
});
If you only want the click event to run once, you theoretically could use jquery's .one() feature instead of .on(). This will automatically unbind the event after running once. Of course this would mean you would have to bind the event again afterwards (if you need it)
http://api.jquery.com/one/
For example
$('.selector').one('click', function(){
// your callback functionality
});
Another thing you could do would be to somehow check if the popup is active, and prevent the click handler from running if so
For example
$('.selector').on('click', function(){
if (check_if_popup_is_active) {
return;
}
// otherwise continue with
// your callback functionality
});
You can use the jQuery .unbind() function from within your callback.
Consider following table for instance
<table>
<tr>
<th class='foo'>bar</th>
</tr>
</table>
We can stop onclick events on th.foo as following
$('th').on('click', '.foo', function() {
var that = this;
// your AJAX call goes here
success: function() {
$(that).unbind('click');
}
});
You can do this via CSS
you_css_selector {pointer-events:none;}
Related
I have a script that adds a <tr> dynamically, outside it seems that the elements contained in it are not recognized by jQuery because it is not yet loaded into the DOM.
I try to use .on function , but it is not working.
Have you an idea ?
$(document).ready(function(){
$("#add_item").click(function(e){
e.preventDefault();
var nbeTr = $(".tablerow").length;
if (nbeTr < 10){
$(".tablerow:last").after("<tr class='filleul'><td></td><td></td><td></td><td><button class='newtr'>X</button></td></tr>");
}
});
$(document).on("click", ".newtr", function(event) {
event.preventDefault();
alert("Yo");
});
});
You'll need to register the event listener when creating the button element. Right now you're trying to register click events to undefined elements.
// create button
$ele = $("<button class='newtr'>X</button>");
// bind event listener to button
$ele.on("click", function() { alert("hello"); });
// insert $ele into DOM
$target.append($ele);
Hey Buck your code is working, I think problem is some where else.
See this working example:
$(document).ready(function() {
$("#add_item").click(function(e) {
e.preventDefault();
var nbeTr = $(".tablerow").length;
if (nbeTr < 10) {
$(".tablerow:last").after("<tr class='tablerow filleul'><td>1</td><td>2</td><td>3</td><td><button class='newtr'>X</button></td></tr>");
}
});
$(document).on("click", ".newtr", function(event) {
event.preventDefault();
alert("Yo");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='add_item'>Add item</button>
<table>
<tr class='tablerow'>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>
<button class='newtr'>X</button>
</td>
</tr>
<table>
Ok, the problem was a bad version of jQuery was using.
I just use CDN of last jQuery version and refresh cache and it's working.
I have 2 radio buttons that will do something when either is checked. And here is a JQuery that is tied to them:
$('input[name=24hours]:radio').on('change', function() {
if($('#hours24y').is(':checked'))
{ $('table').hide(); }
else if ($('#hours24n').is(':checked'))
{ $('table').show(); }
Also in the form I have a reset button. I tried to trigger the event above when the reset button is clicked like so:
$('[type=reset]').on('click', function(){
$('input[name=24hours]:radio').triggerHandler('change');
});
The problem is, when the reset button is click for the first time, it only change the radio button to its initial state. The trigger jquery will only happen when the reset button is clicked again.
So, how can I make the trigger jquery automatically run on first click of reset button?
EDIT: Here's the example of action. When I check on the radio button #hours24n, a table will be shown. and if I check on the radio button #hours24y, the same table will be hidden.
let's say initially, the table is shown with #hours24n is checked. Then, I check on #hours24y thus the table will be hidden. Now, what I expect after clicking the reset button is, #hours24n will be checked and at the same time, the table will be shown again.
Try adding closing bracket, parentesis to change handler }) , utilizing selector 'input[name=24hours][id=hours24n]:radio' , setting .prop("checked", true) before calling .triggerHandler('change') at click event , calling .click() event to set #hours24n intially checked
$(function() {
$('input[name=24hours]:radio').on('change', function() {
if ($('#hours24y').is(':checked')) {
$('table').hide();
} else if ($('#hours24n').is(':checked')) {
$('table').show();
}
})
$('[type=reset]').on('click', function() {
$('input[name=24hours][id=hours24n]:radio')
.prop("checked", true).triggerHandler('change');
}).click();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="radio" name="24hours" id="hours24y" />
<input type="radio" name="24hours" id="hours24n" />
<input type="reset" />
<table>
<tbody>
<tr>
<td>
checked
</td>
</tr>
</tbody>
</table>
jQuery
$('input').on('change', function() {
if ($('.radio[name=24hours]').is(':checked')) {
{
$('.table').fadeTo(500, 1);
this.checked = false;}
if($('#hours24n').is(':checked'))
{
$('.table').fadeOut(500, 0);
this.checked = false; }
}
});
Try that, then create your table with the class 'table', saves the hassle if you need to apply more tables without using this method. Format your cells within;
<table class="table" style="opacity: 0"></table>
I'm using the jQuery tablesorter - I've got checkboxes on each row and essentially want to have a "select all" checkbox inside the <th> element.
I can't actually access the click event, even after disabling the tablesorter on that specific column.
Simple JS test:
$('input[type="checkbox"].select-all').on("click", function(e){
console.log("Clicked!");
});
Click event does nothing, which is why I'm presuming the tablesorter is binded to the parent <th> element. The header:
<tr>
<th class="no-sort"><input type="checkbox" class="select-all" /></th>
<th>Some Sortable title</th>
</tr>
Any ideas on how to access that child checkbox event? I have set that column to not sort via:
// Table-sort
var noSortHeaders = {};
$("table").find("th.no-sort").each( function(index, el){
noSortHeaders[ $(this).index() ] = {sorter: false};
});
$("table").tablesorter({
headers: noSortHeaders
});
If the checkbox is created after DOM ready event, you do want to use event delegation. And I would prefer the change event to the click event:
$(document).on('change', 'input[type=checkbox].select-all', function(e) {
console.log('Changed!');
});
Or, better still:
$('table').on('change', 'input[type=checkbox].select-all', function(e) {
console.log('Changed!');
});
I have a table full of appointments. Every appointment has two buttons. One for canceling the event, one for accepting it.
I am struggling to get the appointmentId in the jQuery function when I click on a button. Can you please give me a hint how to do this? The appointmentId is in the table as a hidden input field.
// my html code
<tr>
<td align="left">
<input type="hidden" name="appointmentId" value="234">
John Smith - 14.03.2013 at 9 o'clock
</td>
<td align="right">
<input type="button" id="acceptEvent" class="acceptEvent" value="Accept">
<input type="button" id="cancelEvent" class="cancelEvent" value="Cancel">
</td>
</tr>
// my jQuery code
$("body").delegate('.acceptEvent', 'click', function() {
console.log('accept event clicked');
// get the appointmentId here
});
$("body").delegate('.cancelEvent', 'click', function() {
console.log('cancel event clicked');
// get the appointmentId here
});
Use closest to grab the parent tr element, then select your hidden field.
The reason that this is the correct answer is because it takes the context of the click event with $(this). Then it travels up the DOM tree to your root table row element and selects the child by name. This ensures that you are always in the correct row.
EDIT: I know you already selected an answer, but this was really bothering me that it wasn't working properly. I had to walk down twice using .children() to get it to work though you could also use .find('input[name="appointmentId"]'). Even though you've already selected your answer, I hope this will help you.
$('.acceptEvent').click(function() {
var myVal = $(this).closest('tr').children().children().val();
});
$('.cancelEvent').click(function() {
var myVal = $(this).closest('tr').children().children().val();
});
In the click function, you have access to the button that was clicked with this so you can do:
$("body").on('click', '.cancelEvent', function() {
var input = $(this).closest('tr').find('input[name="appointmentId"]').val();
});
Assuming you have no other IDs or classes to key off of, you can use jQuery's Attribute Equals Selector in reference to the clicked button's parent tr element:
$('.acceptEvent').click(function() {
// get the appointmentId here
var appointmentId = $(this).closest('tr').find('input[name="appointmentId"]').val();
});
I'll do it like that :
$("body").on('.acceptEvent', 'click', function() {
var id = $('input[name="appointmentId"]').val();
//Or search in the parent <tr>
var id = $(this).parent().find('input[name="appointmentId"]').val();
console.log('accept event clicked');
console.log('Id is ' + id);
});
I have a table like below
<table onclick="dosomething()">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
</table>
After I click on the table, I need to find the td on which the click happened. I cannot have onclick event written on tr or td.
You can do something like this (give your table a class of myClass- or whatever you want):
function tableClicked(td) {
// Do something dependent on the td which was clicked
}
$(document).ready(function () {
$("table.myClass td").click(function () {
tableClicked(this);
});
});
This means that you don't have to add onclick attributes to the <td> tags.
Add an Id to the table and remove onClick handler. this is to seperate the behavior and content.
<table id="tableId">
since event will bubble up, capture it on table element and find the target, so you don't need to add event listener to every td.
$('#tableId').click(function(e){
//the td is the target where event happens
var td=e.target;
});
$(function(){
$("#tbl").bind("click", function(e){
if(e.target.tagName == "TD"){
//do your magic
}
});
});
I would dump the onclick and do this
$("#myTable td").click(function() {
$(this).html(); // get the value
$(this).hide(); // hide it
$(this).remove(); // remove it
});
<table id="myTable">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
</table>