I have a datatable with a data-href inside to create a link to a forum page, My issue lies in the place that my datatable link works great on page one, but when I go to page two I can no longer follow the link,but it still has all the data of a link when I inspect element.
My JS and Style for the link within the datatable
<style>
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background-color:#F0F8FF;}
</style>
<script>
jQuery(document).ready(function($) {
$(".clickable-row").on('click',$('.clickable-row'),function() {
window.document.location = $(this).data("href");
});
});
</script>
All rows are called upon by MySQL tables to populate the data and are pulled correctly.
echo "<tr class='clickable-row' data-href='viewPage.php?id=".inv_forum_page()."&forum=".$forum['id']."'>
<td>".$authorname."</td><td>".$posttype."".$forum['subject']."</td><td>".$forum['replies']."</td><td>".$forum['views']."</td>
</tr>";
I don't feel like posting the entire function as it's quite a bit of code when I don't believe it's the issue since it works on page one I believe it has to do with my Jquery, but if you want to look at the function itself it is on github under
https://github.com/Doxramos/Invontrol/blob/master/plugins/inv_forum/functions.php
line 75-123
I read on delegated events and I believe that that's scripted correctly, s I'm not sure what the issue is at this point.
use below code
your problem is called Event Delegation.
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
<script>
jQuery(document).ready(function($) {
$(document).on('click','.clickable-row',function() {
window.document.location = $(this).data("href");
});
});
</script>
if you call click event every time new page call use below code.
<script>
jQuery(document).ready(function($) {
$(document).off('click').on('click','.clickable-row',function() {
window.document.location = $(this).data("href");
});
});
</script>
You have given class 'clickable-row' to tr. Instead of tr class name, try jQuery 'on' method on table class name. For example, assing class 'clickable-tbl' to table tag and modify jQuery code as follows:
$(".clickable-tbl").on('click',$('.clickable-row'),function() {
window.document.location = $(this).data("href");
});
Related
http://holt59.github.io/datatable/
I have used the this link for filtration and pagination of my table. Earlier i was using the
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
JavaScript code for selecting the row and getting the id , now its not working when i included the js file. please help me to get the dynamic selection of rows.
It is probably destroying and re-adding the rows which removes your event handler. Use event delegation.
$(document).on("click", 'tr[data-href]', function() {
document.location = $(this).data('href');
});
You can move the listening location closer to the row
$("#tableId").on("click", "tr...
Hello i have this code to load php file into div. Its working but i need load next file into this div.
<script type="text/javascript">
$(function() {
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().load(this.href).fadeToggle(1000);
});
});
</script>
<li><a class="load" href="zzz.php">zzz</a></li>
If i click "zzz" link loading file into my div (file table with images) i need hide this page and load next by click image.
UPDATE
Now working
<script type="text/javascript">
$(function() {
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().empty().load(this.href).fadeToggle(1000);
});
});
</script>
You just simply need to bind another click event to an image (or table body) that you load through load() function. However, you may experience some issue with your click not working, and heres why:
If you attach two click handlers, one for a.load and second for, let's say, .image than only the first event will actually get bind to its element, and the socond one won't be attached because, well, .image doesn't exist yet - not untill you load it.
You could expect, that once you php file content will get loaded (with .image elements in it), then clicking them will fire an action you have declared, but it won't - those .image's are new DOM elements and they missed an event binding procedure which was done only once when the DOM was created (or DOM was ready if you use $.(document).ready()).
So, in order to get those clicks to work you need to either attatch them on load() function callback, like so:
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().load(this.href, function(){
$(".image").on("click", function(e) {
$("#zaw").hide().load(/* load what you want */);
});
})
.fadeToggle(1000);
});
or insert .image click event binding inside php file you are loading or use some sort of delegation, for example:
$(document).on('click', '.image', function(){
/* do what you want */
});
which will make sure that even new, dynamically created DOM element will fire an action you want.
i have this HTML code on a page when my page loaded:
<div class="divmain">Add
<span class="spn">123</span>
</div>
when you click on that span it will create another span and show hi alert to you,
when the page loaded for the first time it works fine and write another span on that dive as the same the old span but after that if you click on the new span it works not.
i did some test and found if i add this code :
$('.spn').on("click", function (e) {
showalert(this);
});
on the "spanwriter" function it will works , i mean if that function be like this:
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
<------- this event must be add here until it --------------->
$('.spn').on("click", function (e) { works
showalert(this);
});
}
why i should add click event at the end of wrote content until span can get that event and works?
i used jquery-1.10.2.js on my sample
my all codes are:
$(function () {
$('.divmain').on("click", function (e) {
spanwriter(this);
});
$('.spn').on("click", function (e) {
showalert(this);
});
});
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
}
function showalert(master) {
alert("hi");
}
you have to do the same but with document.on("click")
$(document).on("click", ".buttonClass", function() { console.log("inside"); });
$('.divmain').on("click" make a kind of binding when document is loaded, so when you add dynamix elements to the dom it is noit catched. Whith the use od document.on, it works even if you add dynamic content to the document.
The simplest and best solution to your problem is to attach the event listener to a parent element in the dom and pass the second parameter of the on() method as described in the jQuery documentation (http://api.jquery.com/on/)
In other words you should have something along the lines of:
$('body').on("click", ".spn", function (e) {
showalert(this);
spanwriter(this);
});
and then have the spanwriter() add the new span to the parent of the element it's been called upon.
I hope this is what you were looking for and answers your question.
I've been searching for like 30 minutes already, so I apologize if I missed this answer already. I've seen a lot of CLOSE ones, but none quite like this.
I have an imported JavaScript function which is used in several files. It makes it so any table whose row has a clickable-row class will redirect to the href attribute, thereby making the whole row act like an anchor tag.
However, on some pages I'll have on td be populated with a checkbox, which I want to be able to click WITHOUT the page redirecting (so I can select multiple rows in the table).
Here is my current function:
jQuery(document).ready(function() {
jQuery('.clickable-row').click(function() {
window.document.location = jQuery(this).attr('href');
});
});
I want it to do something like the following, but this doesn't work:
jQuery(document).ready(function() {
jQuery('.clickable-row').click(function() {
if(!jQuery(this).closest('td').hasClass('skip-click')) {
window.document.location = jQuery(this).attr('href');
}
});
});
Any ideas on how to handle this?
You need to use e.target.
this inside the handler will refer to the .clickable-row element, not the element which actually triggered the click. The target property of the event object will return the element that triggered the event.
jQuery(document).ready(function ($) {
$('.clickable-row').click(function (e) {
if (!$(e.target).closest('td').hasClass('skip-click')) {
window.document.location = jQuery(this).attr('href');
}
});
});
I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can't seen to get preventDefault() to work with .on() on these newly created DOM elements.
I'm using jQuery BBQ with my tabs so I can't have "#"s being appended to the URL. This is caused when links within the tab panels are clicked.
I've been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.
My function for a content toggler is...
$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
I'd like to combine the preventDefault() from this function into it.
// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
I've tried several ways using .on("click", function(work)), etc. I've used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I'm doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can't seem to figure this out. Thanks in advance.
the part $(".showMoreOrLess").click just applies to already accessable links on your page
try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners
$(document).on("click", ".showMoreOrLess", function(event) {
event.preventDefault();
//here you can also do all sort of things
});
rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)
$("body").on('click', ".showMoreOrLess", function(event) {
event.preventDefault();
var self = $(this);
if (self.hasClass('clicked')) {
self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
}else {
self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
}
});