Please refer to example here:
http://jsfiddle.net/c0kackzw/
A table goes like this:
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="reportRow odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
When you click a row on the first page, click function works but it doesn't work when you are on the other pages:
$('.reportRow').click(function(){
alert('mm');
});
and all rows has reportRow class. If i add onclick='myFunc' to all tr s it works. But I don't want to use that. How do I make the other way work?
Use event delegation:
It will apply event on the dynamic elements.
$('#example').on('click', '.reportRow', function () {
alert('mm');
});
Ref: http://api.jquery.com/on/
Demo: http://jsfiddle.net/c0kackzw/1/
The problem is that you are only binding click event to the first page rows, but not the second, and etc.
In this case you need to delegate click event to the table itself. It means that instead of binding separate event handler to every row, you bind the only one on some wrapping container (like table in your case; you could also use document or body). Click events occurred inside of this container will eventually bubble to the container you bound handler to, where you can handle it.
$('#example').on('click', '.reportRow', function(){
alert('mm');
});
Demo: http://jsfiddle.net/c0kackzw/2/
Related
<table id="datatable">
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>ket</th>
<th>act</h>
</tr>
<tr>
<td>1</td>
<td>erik</td>
<td>lampus</td>
<td>Closed</td>
<td><button id="get">get</button>
</tr>
<tr>
<td>2</td>
<td>lupin</td>
<td>ggreek</td>
<td>open</td>
<td><button id="get">get</button>
</tr>
</table>
$('#datatable').on('click', '#get', function() {
const row = $(this).closest('tr')[0];
const ket = row.cells[1].innerHTML;
$('#modal').modal('show');
$('#inputmodal').val(ket);
$('#buttonmodal').on('click', function() {
const ket2 = $('#inputmodal').val();
$('#modaladuan').modal('hide');
row.cells[8].innerHTML = ket2;
});
});
I want to change column ket in data table using modal bootstrap, and when button save modal click, value in input modal to change the column, this code work but when second rows click and save, Previously stored data also changed. how to solved that problem, help me. thank you
The problem is that you're using the button with id get. You can only have 1 element for each ID on a page. So:
Change the id="get" to class based, like class="get".
Then add a data-content (content can be a name of your choice) attribute to the button which should be equal to some value for each row. Here you'll have the value which you'll pass to the modal. If you don't prefer to pass data-* attributes, you could traverse the DOM elements (as you've done in your example), but it's generally not that great an idea.
Change the click to act on .get, then you could access the current target's data-content value, and proceed as you were.
If this doesn't work, put up a reproducible example of your code on JSFiddle and we can debug!
I prepared a little simplified snippet, so we can play things through here. Instead of the modal I am using a prompt() to receive an input value from the user. And, as you are already using jQuery you might as well use it properly: I use the tds jQuery object to collect all TDs of the current row. I grab the text value of the second TD in the row (index=1) and use the prompt for getting the user input for putting it back into the fourth column (index=3). The 9th column (index=8) does not exist in your example.
$('#datatable').on('click', '.get', function() {
const tds = $(this).closest('tr').find('td');
tds.eq(3).text(prompt("Enter a new value for "+tds.eq(1).text()));
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="datatable">
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>ket</th>
<th>act</h>
</tr>
<tr>
<td>1</td>
<td>erik</td>
<td>lampus</td>
<td>Closed</td>
<td><button class="get">get</button>
</tr>
<tr>
<td>2</td>
<td>lupin</td>
<td>ggreek</td>
<td>open</td>
<td><button class="get">get</button>
</tr>
</table>
i am using the DataTable plugin to display data in my backend page. The plugin works so far very good except in one situation: I have a table showing all products. For each line of the table i have a link for AJAX activation / deactivation of one product. If i am on the first page the activation / deactivation works fine, but when i choose another page using the DataTable Pagination i cannot activate / deactivate the chosen product. It does not display any error in the Firebug, so i am assuming that somehow the link is not correctly displayed.
Here is my HTML code:
<table id="products" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Copy</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Copy</th>
<th>Status</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Iphone</td>
<td><span class="glyphicon glyphicon-floppy-disk"></span></td>
<td><span id="span_1" class="glyphicon glyphicon-ok-sign"></span></td>
<td><span class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
and right after the HTML code, comes the Javascript:
<script>
$(document).ready(function() {
$('#products').DataTable();
$('table#products td a.status_product').click(function() {
// activate / deactivate
});
$('table#delTable tr:odd').css('background',' #FFFFFF');
});
</script>
You need to use event delegation by providing selector as a second argument in on() call, see example below:
$('table#products').on('click', 'a.status_product', function() {
// activate / deactivate
});
From jQuery on() method documentation:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.
I have code like this:
<table>
<tr>
<td>Cel1
<td>Cel2
<tr>
<tr>
<td>Cel3
<td>Cel4
<tr>
</table>
How can I disable event jQuery? I tried this method:
cell.setAttribute("disabled","true")
$('td').unbind();
Will unbind all events on td elements.
Given your example HTML:
<table>
<tr>
<td>Cel1</td>
<td>Cel2</td>
</tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
</tr>
</table>
If you want to disable a given cell using jQuery, you'll need to do two things.
First, you'll need to select a cell. You can do this without changing the markup by using the :nth-child(), for instance - but to make it simple, let's add a class to the cell you want to disable:
<table>
<tr>
<td class="my-cell">Cel1</td>
<td>Cel2</td>
<tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
<tr>
</table>
Now, we can select the cell using jQuery as follows:
var cell = $('.my-cell');
To unbind event handlers from the element
From here, if you want to remove all events which are assigned to the element, you can use jQuery's .unbind() as Sofiene mentioned:
cell.unbind();
To hide the cell in the table
If you'd like to remove the cell from the table by setting CSS attributes, this can be done by setting the style attribute using jQuery's .attr(), for instance:
cell.attr('style', 'visibility: hidden;');
I am trying to use .on to bind an event only to direct children of an element.
The dom looks like this:
table > tbody > tr+ > td > table > tbody > tr+
So far I have tried:
table.find(">tbody").on("dbclick", ">tr", listenerFunction);
table.on("dbclick", "> tbody > tr", listenerFunction);
None of these works as expected and using table.on("dbclick", "tr", listenerFunction) collides with the nested table causing double triggers and the likes because both tables have this listener.
Any ideas most appreciated.
<table>
<tbody>
<tr><!--Selectable row, adds the row after with sub table --></tr>
<tr>
<td>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
In your listener function use event.stopPropagation to stop the event bubbling back up to a parent tr.
function listenerFunc(e) {
e.stopPropagation();
// Do your thing...
}
My suggestion would be to either add an id or class to the child table. This would ensure that it doesn't conflict with any other element on the page or any modification that happens in future. Suppose you add a class nested-table to child table. The code will look like this:
$('table.nested-table tr').dblclick(listenerFunc)
As you have indicated that you reference to table, this should work:
table.on('dblclick', 'tr', listenerFunc)
If your first <table> is not nested itself, you can provide a selector that only matches <tr> elements that are not descendants of other <tr> elements:
table.on("dbclick", "tr:not(tr tr)", listenerFunction);
Try
var table = $('#tbl')
table.on("click", "> tbody > tr", listenerFunction);
function listenerFunction(e){
if(!$(this).children().filter($(e.target).closest('td')).length){
return;
}
console.log('direc tr')
}
Demo: Fiddle
It turns out that this is in part me forgetting to prevent event bubbling and in part a bug/missing feature in jquery 1.7.
The same code in two jsfiddles
jQuery 1.7.2
jQuery 1.9.1
In jQuery 1.7.2 passing ">tr" as the selector to .on does not work, I do not know if this is a bug or something that's just not implement in 1.7.2 however the .on method was added in 1.7.
The following code reproduces the error. I've tested this on Chrome running on Mountain Lion and Chrome running on window 7
HMTL:
<table id="outer">
<tbody>
<tr id="outer-row">
<td>Hello</td>
<td>World</td>
</tr>
<tr id="outer-row-1">
<td>
<table id="inner">
<tbody>
<tr id="inner-row">
<td>nested
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JS:
$(function() {
var handle = function(e) {
console.dir(this.id);
};
$("#outer").children("tbody").on("dblclick", ">tr", handle);
$("#inner").children("tbody").on("dblclick", ">tr", handle);
});
I am adding a div to a form that I am creating. I want to do this with the on() function, but I cannot seem to make it work. From what I understand you have to use an event, but is there a way to make an event out of a div being added. The code that I have been trying is with a "click" event, but that isnt really what I want. The datepicker is added after the first click, but the buttonImage is not being added at all. I need it to work on the first click. Here is the code that I am using right now:
$('#switcher-panel').on('click', 'table tr td input', function(){
$('.datepicker').datepicker({
buttonImage: "images/calendar.png"
});
});
Here is the html that I am using:
<table class="table table-hover" data-controller="rank">
<thead>
<tr>
<th colspan="4" align="left"><h2> Boy Scout Rank</h2></th>
</tr>
<tr>
<th>Number</th>
<th>Requirements</th>
<th>Completed</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr data-name="one_li">
<td>1</td>
<td>
Req
</td>
<td>
<input class="datepicker"/>
</td>
</tr>
</tbody>
</table>
I dont understand how to handle this. Any help would be great.
$(function(){
$('.datepicker').datepicker({
showOn:"button", // or "both" if you want the input to trigger the datepicker too
buttonImage: "images/calendar.png"
});
})
Judging by your above code, it doesn't look like you're adding a new <div />
If you're not, you shouldn't need to add an event (click) handler - http://jsfiddle.net/ZNR7P/
You should just be able to do:
$(function() {
$('.datepicker').datepicker();
});