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);
Related
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();
});
Hello can I use each for elements that they are created on the fly?
$('#cart-info .shopp').each(function(){
var cartitem = $(this);
alert(cartitem);
cartitem.find('img.remove').on('click',function(){
alert(cartitem.attr('id'));
});
});
I created elements under div cart-info. But unfortenately the click event does not work. If the elements are provided when the page loads it works. For example look at http://jsfiddle.net/epapathanasiou/jpdZt/1/
$('#cart-info').on('click', '.shopp img.remove', function(){
// this is the `img.remove` element
alert($(this).closest('.shopp').attr('id'));
});
Here is the demo.
use event delegation
$('#cart-info').on('click', '.shopp img.remove', function(){
alert(cartitem.attr('id'));
});
You could also do this:
$('#cart-info .shopp').each(function () {
var cartitem = $(this);
console.log(cartitem.text());
cartitem.find('img').on('click',function () {
console.log(cartitem.attr('id'));
});
});
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.
So I have the following fragment:
$(".server").each(function() {
var element = $(this);
//bunch of javascript here with element
});
I also want to bind a single click event for an id to do the same work as the above, how is this possible, without copying and pasting the entire block and doing:
$("#my-id").click(function() {
var element = $(this);
//bunch of javascript here with element
});
I think the following should work:
var eventHandler = function() {
var element = $(this);
//bunch of javascript here with element
};
$(".server").each(eventHandler);
$("#my-id").click(eventHandler);
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());
});