JQuery delegate method on a grid - javascript

I am trying to use the delegate method on a grid that I wrap with the DataTables.Net plug-in. I originally had this code which works as expected.
$("#myGrid tbody tr").click(function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
However, if I change the paging size then the newer rows don't have the click event calling the function. I decided the new JQuery delegate method should do exactly what I wanted; however, it does nothing at all on any tr element.
Could anyone explain why this does not work :
$('#myGrid tbody').delegate('tr', 'click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
I have tried different combinations of the selector and none get it to work.

Try this instead:
$('#myGrid').delegate('tr', 'click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
There's a good chance that some events on your tbody are getting messed with and/or your tbody's are getting manipulated. I doubt the entire table suffers from this problem as well.

Use this:
$("#myGrid tbody tr").live('click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
.live() works for current of future elements.

Behind the scenes, bind, delegate and live all use the method on.
I've had a few problems with delegate, so I started using on instead.
Converting your delegate calls to on is easy: just swap the first and second arguments.
This:
$('#myGrid tbody').delegate('tr', 'click', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
Becomes this:
$('#myGrid tbody').on('click', 'tr', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
BTW: live is deprecated in newer version of jQuery

Try this
$('#myGrid tbody').delegate('click', 'tr', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});
or
$('body').delegate('click', '#myGrid tbody tr', function() {
var id = $(this).children('td').eq(0).text();
alert(id);
});

If the newer rows are being added dynamically, you have to use live method on the items, change the delegate to live

Related

`clone` doesn't add element `after`

I need to clone element and add it after onther elelment. This code supposed to do that but not work
$(document).on('click', '.js-add-faq-row', function(){
var tl = $('.faq-container:last');
tl.clone().after(tl);
});
fiddle is here
You need to use insertAfter()
$(document).on('click', '.js-add-faq-row', function(){
var tl = $('.faq-container:last');
tl.clone().insertAfter(tl);
});
or you need to do it like this with after()
$(document).on('click', '.js-add-faq-row', function(){
var tl = $('.faq-container:last');
t1.after(tl.clone());
});
In your code you are trying to insert element after the cloned element which is not yet part of the dom.
UPDATE : or more better and easy way using after() with callback
$(document).on('click', '.js-add-faq-row', function(){
$('.faq-container:last').after(function(){
return $(this).clone();
});
});
The problem is that you are trying to add tl after the clone, but the clone doesn't exist anywhere yet. You need to do it the other way around:
var clone = tl.clone();
tl.after(clone);

jQuery Replace DIV - Not working with 1.11

I am trying to load content from a hidden div container into an active container. This should be so simple. The code I have works fine with old jQuery, but is broken with the latest version. What am I missing here?
Here is my code in JSFiddle
http://jsfiddle.net/poaw07w4/
$('.campuslink').live('click', function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#faq_" + id).html();
$('#campusfaq').fadeOut(600,function(){
$('#campusfaq').html(contentTobeLoaded).fadeIn(500, function () {
});
});
e.preventDefault();
The live method was deprecated in version 1.7 and removed in version 1.9. You can use the on method to create a delegated event. (Don't forget the e parameter):
$(document).on('click', '.campuslink', function (e) {
Demo: http://jsfiddle.net/poaw07w4/3/
Note: Binding the event on the document element corresponds to how live worked. If possible you should use an element closer to the element where the event occurs, to reduce the overhead.
Try using .on('click') instead of .live('click')
https://jsfiddle.net/dotnetmensch/poaw07w4/1/
$('.campuslink').on('click', function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#faq_" + id).html();
$('#campusfaq').fadeOut(600, function () {
$('#campusfaq').html(contentTobeLoaded).fadeIn(500, function () {});
});
e.preventDefault();
});
The live() method has been deprecated since JQuery 1.7 (more here). If you replace it with the on() method, it should work fine (note also that preventDefault() is moved):
$('.campuslink').on('click', function (e) {
e.preventDefault();
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#faq_" + id).html();
$('#campusfaq').fadeOut(600,function(){
$('#campusfaq').html(contentTobeLoaded).fadeIn(500, function () {
});
});

jQuery Functions not applying to dynamically generated content

I've been trying to apply my jQuery functions to dynamically generated content by using the .on API from jQuery, but it's not working as it's suppose to. The purpose of the code is to display a set of options only when a user hovers over the div ".feed_post_full", and it does. Although it doesn't apply to content that is dynamically generated.
Here is my code here:
$(".feed_post_full" ).on({
mouseenter: function() {
var id = (this.id);
$('#post_options'+id).show();
}, mouseleave: function() {
var id = (this.id);
$('#post_options'+id).hide();
}});
What should I do to fix it?
You need to use the delegated form of .on() for it to work with dynamically create elements. You want this form:
$('#static_parent').on(events, ".dynamic_child", function() {});
See these other posts for more explanation:
jQuery .live() vs .on() method for adding a click event after loading dynamic html
Does jQuery.on() work for elements that are added after the event handler is created?
Does jQuery.on() work for elements that are added after the event handler is created?
Your code would look like this:
$(parent selector).on({
mouseenter: function () {
var id = (this.id);
$('#post_options' + id).show();
},
mouseleave: function () {
var id = (this.id);
$('#post_options' + id).hide();
}
}, ".feed_post_full");
Where the parent selector is a selector of the closest parent to your dynamic content that is not itself dynamic.
Try this:
$(document).on({
mouseenter: function() {
var id = (this.id);
$('#post_options'+id).show();
}, mouseleave: function() {
var id = (this.id);
$('#post_options'+id).hide();
}
}, ".feed_post_full");
Best way to improve performance:
$("FEED_POST_FULL_PARENT_ELEMENT_AVAILABLE_ON_DOM_READY").on({
mouseenter: function() {
var id = (this.id);
$('#post_options'+id).show();
}, mouseleave: function() {
var id = (this.id);
$('#post_options'+id).hide();
}
}, ".feed_post_full");

cant hide data that was dynamically added

this is the function to hide the data
$(".dispatch_pedido").live('click', function(){
var res = this.id.split("_");
var id = res[1];
$("#"+id).hide();
});
this code only works on the data that was initially added but not the data added by ajax.
When you use ajax to add new element to the DOM, you need to use event delegation so the event can bind to that newly added element:
$(document).on('click', '.dispatch_pedido' , function(){
});
Also, live is deprecated as of jQuery version 1.7 , you should use on() instead.
You can use delegate() instead of on() in old version of jQuery:
$(document).delegate( ".dispatch_pedido", "click", function() {
// Your code here
});
It seems your syntax is not correct. Checkout the below code.
$(".dispatch_pedido").live('click', function(){
var res = $(this).attr("id").split("_");
var id = res[1];
$("#"+id).hide();
});

Jquery dynamically create link

I have a piece of JQuery that creates a row in a table and in one of the cells there is an X that is surrounded by a class. When it is dynamically created and then clicked on the click listener does not fire.
Here is the code.
$('#add').click(function() {
$( '#table' ).append('<td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});
Since the <td> element does not yet exist when you register your event handler, you have to use live() or delegate() for the handler to be triggered later:
$(".x").live("click", function() {
alert("Fired");
});
$(".x").live("click", function()
{
alert("Fired");
});
Live adds events to anything added later in the DOM as well as what's currently there.
Instead of
$('.x').click(function() {
alert('Fired');
});
Change to this
$('.x').live('click', function() {
alert('Fired');
});
It binds the click function to any created element with class x
You need to use the .live function for content that's dynamically generated.
so replace
$('.x').click(function() {
with
$('.x').live('click',function() {
You are first creating the listener to all .x elements (of which there are presumably zero), then later adding new .x elements.
There are two solutions: one is to use jQuery live, the other is to rewrite your code:
var xClickHandler = function() {
alert('Fired');
};
$('#add').click(function() {
$('#table').append(
$('<td class="x">X</td></tr>').click(xClickHandler);
);
});
Use live instead of click:
$('.x').live("click", function() {
alert('Fired');
});
The html you are appending to the table has a typo, you have missed out the beggining tr tag:
$('#add').click(function() {
$( '#table' ).append('<tr><td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});
I think you need to use the live method. http://api.jquery.com/live/
$('.x').live('click', function() {
// Live handler called.
});

Categories