Tried again, but changed the code so the new product will be prepended
to the fieldset#step1 -- so, it's always at the top of the page.
$("#add").click(function() {
$("div.product-template:first").clone(true).prependTo("#step1");
});
Events get copied but the cloning happens only on second click on #add
button and third click eliminates the recently added .product-template
Help please???
Elle
On May 3, 8:23 am, elle <[EMAIL PROTECTED]> wrote:
> Hi KArl,
>
> I didn't know that. Will try again.
>
> Elle
>
> On May 3, 2:43 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > Hi Elle,
>
> > When the book was published, .clone() didn't have the event-cloning
> > option. That was added in one of the 1.2.x releases. So if you're
> > using a version of jQuery after 1.1.x, you should remove the
> > cloneEvents.js script and try with .clone(true)
>
> > --Karl
> > _________________
> > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > On May 2, 2008, at 4:57 AM, elle wrote:
>
> > > Hi Karl, and thank you for your reply.
>
> > > This didn't really work -- unless I missed something important on the
> > > way.
> > > I was reading "Learning jQuery" and it says that .clone() doesn't copy
> > > the events related to the cloned items (which I need). It suggested to
> > > use copyEvents.js So, I have that script linked and I checked:
> > >http://www.learningjquery.com/2007/01/copy-events-from-one-element-to...
> > > but... I still don't get it to work. What is my mistake???
> > > My code now says:
> > > ...
> > > $(document).ready(function() {
> > > $('#orderform').find('.options').hide();
> > > $('#add').one('click', function() {
> > > $('.product-template').copyEventsTo('#orderform
> > > .product-
> > > template');
> > > return false;
> > > });
> > > ...
>
> > > Any ideas???
>
> > > Thanks,
> > > Elle
>
> > > On May 2, 12:44 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> > >> 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");
> > >> });
>
> > >> });
>
> > >> - Toclonethe 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 onlyclonethe 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 Swedbergwww.englishrules.comwww.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
