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();
});
Related
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);
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 () {
});
});
See the code's comment:
$.each($('input[type="radio"]'), function(){
var input = $(this);
var container = $('<div class="radio"></div>');
var mark = $('<span />');
input.wrap(container).after(mark);
container.click(function(){
alert('test'); // Not triggered.
});
});
The html is:
<input type="radio" value="female" name="gender" />
Anyone know why the alert is not triggered when clicked, and yes it is visible in CSS. When I use :
console.log(container);
It does give me the HTML it is containing.
Thanks
$('body').on('click', 'div.radio', function() {
});
Full Code
$('body').on('click', 'div.radio', function() {
alert('test');
});
$.each($('input[type="radio"]'), function(){
var input = $(this);
var container = $('<div class="radio"></div>');
var mark = $('<span />');
input.wrap(container).after(mark);
});
NOTE
Instead of body, you should use a static-element that is the container of container.
Why you need this
You need delegate event handler, as your element added to DOM dynamically that means. after page load.
after some tested it seems to me that the "wrap" clone the object you pass it as argument, or reference to the object is lost but I'm not so sure.
a first solution is to assign the event "onclick" before moving the object in the "wrap".
$.each($('input[type="radio"]'), function(){
var input = $(this);
var container = $('<div class="radio"></div>');
var mark = $('<span />');
$(container).click(function(){
alert('test'); // triggered now.
});
input.wrap(container).after(mark);
});
a simplified version :
$.each($('input[type="radio"]'), function(){
var wrapper = $('<div class="radio"></div>').click(function(){
alert('test'); // triggered now.
});
$(this).wrap(wrapper).after($('<span />'));
});
dont forget to decalare this function in the onload function
$(function(){
// your code here ....
});
I was also affected by this and found that on is available only with jquery 1.7 and above.
I am on jquery 1.4.1 and on is not available with version. Upgrading jquery was something I wanted to avoid.
Thankfully delegate was there and it solved the problem.
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());
});
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