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");
Related
I am trying to let Jq listen to three buttons at the same onclick method
then trigger a function and call the clicked button by $(this);
here is a sample :
$("body").on('click', 'a.home:visible', 'a.mobile:visible', 'a.phone:visible', function () {
var attr = $(this).attr('attr');
$(this).parents('.dropdown-menu').prev().prev().text(attr);
});
You did it basically correct. Your approach is fine. But you have to combine it in one string, not as single parameters. And you don't need :visible, because you can't click on invisible elements. ;)
$("body").on('click', 'a.home, a.mobile, a.phone', function() {
var attr = $(this).attr('attr');
$(this).parents('.dropdown-menu').prev().prev().text(attr);
});
If the elements are static you should even use a normal event listener instead of a delegation.
$('a.home, a.mobile, a.phone').click(function() {
var attr = $(this).attr('attr');
$(this).parents('.dropdown-menu').prev().prev().text(attr);
});
Put them in one quotes
$("body").on('click', 'a.home:visible,a.mobile:visible,a.phone:visible', function() {
alert('Clicked')
});
JSFIDDLE
I have the following code. It works fine but when i add new elements into the dom it does't show or hide it.
jQuery("div.cat-icon").on({
mouseenter: function () {
jQuery(this).find('.catselect').show();
},
mouseleave: function () {
jQuery(this).find('.catselect').hide();
}
});
Please advice.
Dynamically added elements require delegated event handlers :
jQuery(document).on({
mouseenter: function () {
jQuery(this).find('.catselect').show();
},
mouseleave: function () {
jQuery(this).find('.catselect').hide();
}
}, "div.cat-icon");
You need to use event delegation for dynamically added elements, for which the syntax is
jQuery(document).on({
mouseenter: function () {
jQuery(this).find('.catselect').show();
},
mouseleave: function () {
jQuery(this).find('.catselect').hide();
}
}, "div.cat-icon");
In event delegation model, you need to bind the handler to an already existing element and then pass the target element selector as the second argument to on
I want to hook events with the .on() method. The problem is I don't know how to get the object reference of the element on which the event take place. Maybe it's a midunderstanding of how the method really works... but I hope you can help.
Here's what I want to do:
When a file is selected, I want the path to be displayed in a div
<div class="wrapper">
<input type="file" class="finput" />
<div class="fpath">No file!</div>
</div>
Here's my script
$(document).ready(function() {
$this = $(this);
$this.on("change", ".finput", {}, function() {
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
});
Something like that but that way it doesn't work.
Like this
$(document).ready(function() {
$('.finput').on("change", function() {
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
});
Do you need to use on()? I'm not sure what you are trying to do exactly.
$("#wrapper").on("change", ".finput", function(event){
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
I haven't tested your code, but you need to attach the on() to the wrapper.
Can you just use change()?
$('.finput').change(function() {
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
This should help. If you want to see when a file input changes, bind the event to it
$("input[type='file']").on("change", function(e){
var path = $(this).val();
})
Try:
$(document).ready(function() {
$('body').on('change','input.finput', function() {
var path = $(this).val()
$(this).parent().children(".fpath").html(path.split("\\").pop());
});
});
$(document).on("change", ".finput", function() {
$(".fpath").html(this.value.split("\\").pop());
});
This is a delegated event handler, meaning the .finput element has been inserted dynamically so we need to delegate the listening to a parent element.
If the .finput element is not inserted with Ajax and is present on page load, you should use something like this instead:
$(".finput").on("change", function() {
$(".fpath").html(this.value.split("\\").pop());
});
Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks
This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/
You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});
I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);
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