Hi Elle,
Here are a few thoughts.
Your code:
$("#add").click(function() {
$(".product-template").clone().appendTo(".product-template:last-
child");
});
- Do you have this inside a document.ready?
$(document).ready(function() {
$("#add").click(function() {
$(".product-template").clone().appendTo(".product-template:last-
child");
});
});
- To clone the events along with the DOM elements you can
do .clone(true) instead of .clone()
- The problem with the click not working could have to do with the
":last-child" part. I'd change it to ":last" and also change the
insertion method from .appendTo() to .insertAfter()
- Probably a good idea to only clone the first .product-template each
time.
Try something like this:
$(document).ready(function() {
$("#add").click(function() {
$("div.product-template:first").clone(true).insertAfter("div.product-
template:last");
});
});
Hope that points you in the right direction.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On May 1, 2008, at 1:53 AM, Waz and Elle wrote:
Hi,
I'm new to jquery and went over quite a few tutorials -- some work
great for me, with no problems at all. But I'm having trouble with
the .clone() method.
I am trying to build an order form, and have a button#add, which when
clicked I want it to add another div.product-template (that includes a
select list, options, quantity and add to cart button).
So, my code says:
http://pastie.caboo.se/189769
but... when I click on the button#add, once nothing happens, second
time it adds the .product-template but any functions I had attached to
the select list don't work. third click gets rid of my
second .product-
template.
In my document I have:
.... snip ...
div#orderform
form
button#add
fieldset#step1
div.product-template
.... rest of options come here
fieldset#step2
.... snip ...
Would anyone know how to correct this?
TIA,
Elle
