Jquery click handler not working in a table [duplicate] - javascript

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I am using a Jquery plugin called Jquery Content Panel Switcher. It does exactly what the title says, it switches out divs with ease. The html for the page is:
<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>
<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>
<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>
In each of my content panels I have a form. In each form there is a table:
<table class="table table-hover" data-controller="rank">
<thead>
<tr>
<th colspan="4" align="left"><h2>Rank 1</h2></th>
</tr>
<tr>
<th>Number</th>
<th>Requirements</th>
</tr>
</thead>
<tbody>
<tr data-name="one_li">
<td>1</td>
<td>Info</td>
</tr>
<tr data-name="two_li">
<td>2</td>
<td>More Info</td>
</td>
</tr>
</tbody>
</table>
I am trying to fire off an action if a row gets clicked. Here is the javascript I am using:
$(document).ready(function(){
$('#switcher-panel form table tbody tr').click(function(){
console.log("Clicked");
});
});
When I use the Jquery selector of $('#switcher-panel form table tbody tr') in my Chrome console, it finds the table and everything looks fine. When I put it in my javascript file, nothing happens. Some direction would be great. Thanks for the help.

This will work:
$('#switcher-panel').on('click', 'table tr', function() {
console.log("Clicked", this);
});
Example
This adds a listener to the #switcher-panel that listens for click events on it's children, if the clicked child falls under the 'table tr' selector.
Check out this artice for more info about event delegation. (Ctrl+f for Event delegation)

If the content of the panel is dynamically appended you would need to delegate the click event to a static parent element. Try this:
$('#switcher-panel').on('click', 'form table tbody tr', function(){
console.log("Clicked");
});
My guess would be you could shorten the child selector to table tr as well.

Related

Access td with class on row open

I have a footable
. When I click on the plus to expand a row
I want to access with jQuery the yellow elements:
If I inspect the element the DOM looks like that after the click:
<table class="footable-details table">
<tbody>
<tr><th>
DOB (hide)
</th><td style="display: table-cell;">
10/16/1977
</td></tr><tr><th>
Description
</th><td class="someText" style="display: table-cell;">
Some description
</td></tr>
</tbody>
</table>
What I would like to do, is to set colspan="2" for td.someText and hide the <th>Description</th>. But I can't access td.someText
I tried to access it with
$('.footable').on('expand.ft.row', function(e, ft, row){
$(row.$details).find('td.someText'));
});
but he does not find anything. In fact, alert($(row.$details).html()); only returns
<td colspan="4">
<table class="footable-details table">
<tbody>
</tbody>
</table>
</td>
Any idea how to access the td with class someText after click?
Here is a jsFiddle
Note: This is not a duplicate of Footable and capturing the expand row event. The linked question is about how to access a row in general. This question is if I select it with the method from the API the content is not loaded correctly. The question helped me to get here, but does not to solve the here presented issue.
expand.ft.row event fires before it appends the dom content.so if you try to read the row content, it's not there.
The correct event for your case is expanded.ft.row which fires after appending the content.
$('.footable').on('expanded.ft.row', function(e, ft, row) {
alert($(row.$details).html());
});
check this demo
https://jsfiddle.net/bfmaredn/
I found this event by analyzing the source code from GitHub repository https://github.com/fooplugins/FooTable/blob/V3/src/js/classes/FooTable.Row.js
Use "async function", try the following code:
$(function() {
$(".footable").footable();
$('.footable').on('expand.ft.row', async function(e, ft, row) {
alert($(await row.$details).html());
});
});
Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Dynamically created (bootstrap) html table rows - on click event wont trigger [duplicate]

This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 5 years ago.
I'm using bootstrap table in my view, and table rows are dynamically created, and
after they are created I would like to attach a .onclick event to my rows so in case someone clicks on the row I might highlight it,
I tried it and tested it, and I couldn't figure out how to solve this.
Here is my code:
1.) First, try - absolutely bad because keeps attaching events on my row, after few clicks there is 5-6-7 alerts popup..
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$('#TableItems').click(function (e) {
$('#TableItems tr').click(function (e) {
alert("Clicked!");
});
});
</script>
2.) Second try - also not good because view is rendered and tr are not rendered yet so probably, onclick event can not be attached because when I'm clicking on it
nothing is happening
$('#TableItems tr').click(function (e) {
alert("Damn");
});
Here is my table
<div class="table-responsive" id="myTable">
<table class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">Title </th>
</tr>
</thead>
<tbody id="TableItems"></tbody>
</table>
</div>
You can use .on() for this
$('#TableItems').on('click', 'tr', function (e) {
alert("Damn");
});

How to turn off jQuery click event

I have a table and the TDs have a class and based on that class I'm adding click events to it like this
$('#regRegionsTable').on('click', '.toggleDetail', toggleDetail);
I'm using on because the table appears, goes away, and returns, and so on, so I need to be able to add events to the table as it gets added to the DOM. In certain circumstances I need to disable the events for a specific row. I'm trying it like this, but it's not working.
$(row).off('click', '.toggleDetail');
row is the TR DOM node. So I'm trying to get all of the TDs in the row that have the toggleDetail class and turn off the click event binding.
This is an example that could be useful. I add the click event on each td. On certain circumstances (clicking on a button in my example) I disable the click event for all the td on a specific row (the first row) using unbind()
$('#regRegionsTable td.toggleDetail').on('click', toggleDetails);
function toggleDetails(){
console.log("click avvenuto")
}
$("button").on("click",function(){
$('#regRegionsTable tr:first-of-type td.toggleDetail').unbind('click', toggleDetails);
})
function toggleDetails(){
console.log("click avvenuto")
}
<table id="regRegionsTable" border="1">
<tr>
<td class="toggleDetail">1</td>
<td class="toggleDetail">2</td>
<td class="toggleDetail">3</td>
</tr>
<tr>
<td class="toggleDetail">4</td>
<td class="toggleDetail">5</td>
<td class="toggleDetail">6</td>
</tr>
</table>
<button>Remove event on a specific tr</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery UI Drop Anywhere on Table

I have a page which contains a table. I want the user to be able to drag from one place to anywhere on the table. Drop does not seem to be fired.
JSFiddle here:
http://jsfiddle.net/netroworx/Kk9MX/
Javascript:
$('#dragSource').draggable();
$('#dropTable').droppable({
drop: function() { alert('drop'); }
});
Html:
<p>Drop SOURCE anywhere on table</p>
<table id="dropTable" border="1">
<thead>
<tr><th>Name</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>Name1</td><td>Description1</td></tr>
<tr><td>Name2</td><td>Description2</td></tr>
<tr><td>Name3</td><td>Description3</td></tr>
<tr><td>Name4</td><td>Description4</td></tr>
</tbody>
</table>
<div id="dragSource">SOURCE</div>
Seems like the droppable is not working on table if you surround the table with a div then it works
Check Fiddle demo

jQuery .on delegation, only direct children in selector

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

Categories