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");
});
Related
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
So I have table, where rows are created dynamically using v-for:
<table>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr v-for='data in datas'><td class='name'>#{{data.name}}</td><td>#{{data.surname}}</td></tr>
</table>
And then, using jQuery, I want to hide the column with class 'name', but when I make
$('.name').hide();
Only header disappears. I suppose it's because the row is made dynamically, but how could I handle this?
I've tried:
making each() function on all elements with this class,
writing script like .css('display','none'), not hide()
but it didn't help. Strange, but alert() in each() fires each time it should, but hide() ignores added elements
More concrete data:
the table itself:
<table class="striped bordered responsive">
<thead>
<tr><th class="stat-table-creatives" colspan="2">Creative info</th><th>Impressions</th><th>Clicks</th><th>CTR</th><th>CPC</th><th>Price per unit</th><th>Sum</th><th class="stat-table-date">Date</th></tr>
</thead>
<tbody>
<tr v-for="stat in stats"><td class="stat-table-creatives">#{{ stat.creativeTitle }}</td><td class="stat-table-creatives">#{{ stat.creativeType }}</td><td>#{{ stat.impressions }}</td><td>#{{ stat.clicks }}</td><td>#{{ stat.ctr }}</td><td>#{{ stat.cpc }}</td><td>#{{ stat.client_price }}</td><td>#{{ stat.sum }}</td><td class="stat-table-date">#{{ stat.date }}</td></tr>
</tbody>
</table>
function called on button click
getJsonForStats: function(filters){
if((filters[0]=='creative')||(filters[1]=='creative')){
$('.stat-table-creatives').show();
} else {
$('.stat-table-creatives').hide();
}
if((filters[0]=='date')||(filters[1]=='date')){
$('.stat-table-date').show();
} else {
$('.stat-table-date').hide();
}
});
The function is called from another function, which is called on v-on:click
jQuery works just fine with Vue dynamically created table. Check this fiddle: https://jsfiddle.net/crabbly/9o69f2yr/
I believe the problem will be on how your application is loading, your filters, etc.
Depending on how you are trying to access the table rows, you may want to make sure that DOM is completely updated before querying it. You can use Vue's nextTick (http://vuejs.org/api/#Vue-nextTick).
Inside your Vue method, before you try to hide the rows, in your example, calling getJsonForStats method, you can do
this.$nextTick(function() {
//DOM updated and ready to rock and roll
this.getJsonForStats(..your filter params...);
}
suppose it's because you use the same class for <th> and <td>
try <th class="name-th"> and then $(".name-th").hide(); $(".name").hide();
maybe it will help
UPD:
I don't know.. this code is working perfectly:
<table id="tab" border='1'>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr><td class='name'>n</td><td>s</td></tr>
</table>
<input id="click" type="button" value="Hide" />
js:
$(document).ready(function(){
$("#click").click(function(){
$("#tab").find(".name").hide();
});
});
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
i am creating a table and hide it immediately after its creation. [don't want to face DOM]. then user select from dropdown and i show it. its working fine. but when i go to that page for the first time it does not hide that div.
code
<table class="table table-striped table-bordered " id="book_info" >
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
<script> $('#book_info').hide();
alert("passed");
</script>
<!-- remaining html stuff-->
that alert do not hit when i goto that page. when i refresh the page ,it shows alert...
You need to wrap your jQuery method calls in a document ready():
$(document).ready(function() {
$('#book_info').hide();
...
});
Alternatively you could just use CSS to initially render the table hidden:
#book_info {
display: none;
}
...then call jQuery's show() method when you want to display it:
$('#book_info').show();
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.