$(document).ready( function(){
var clickAdd;
clickAdd = function() {
// In your code you will end up cloning every item in the list
// This snipet finds the list item that this button is in
$(this).parents("li.ingredient")
// You had :last-child here but really there should only be one
ingList id anyway
.clone.appendTo("#ingList");
// Now we have to add this function to the newly created add button
// Get the button in the last (newly added) list item
$("#ingList li:last-child .addIng")
// bind this function to it
.click(clickAdd);
};
// Now to start everything off, bind the function to any currently
existing add buttons
$('#ingList .ingredient .addIng').click(clickAdd);
});
On 12/21/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
Quoting Blair McKenzie <[EMAIL PROTECTED]>:
As you two requested...sorry I didn't do it sooner:
http://www.commadelimited.com/uploads/bug/
You'll see the rudimentary beginnings of my code.
> This is the sort of situation where a demo page would really help. Can
you
> put any of this on a public server?
>
> Blair
>
> On 12/21/06, Andy Matthews <[EMAIL PROTECTED]> wrote:
> >
> > I'm working with recipes and I want to use some jQuery goodness to
clone a
> > DOM construct that will contain a few form fields so that adding
> > ingredients
> > is easy, and fun. I thought that it would be pretty easy to code but
it's
> > giving me some trouble and I wanted to see if you guys could help me
out.
> >
> > My HTML:
> > <ol id="ingList">
> > <li class="ingredient"><input type="text" name="ing_01"><input
> > type="button" class="addIng" value="+"></li>
> > </ol>
> >
> > Here's the jQ code I have thus far:
> > $(document).ready( function(){
> > $('#ingList .ingredient .addIng').click( function() {
> > $('#ingList
> > .ingredient').clone().appendTo('#ingList:last-child');
> >
> > });
> > });
> >
> > The goal is that the user would fill the first field then click the
"+"
> > button. Then the following would occur:
> >
> > 1) Clone current LI tag
> > 2) Append it to itself.
> > 3) Clear the value from the form field
> > 4) Increment the name value of the form element, ing_01, ing_02, etc.
> > 5) Lastly, remove the plus button from the elemet just previous to the
new
> > one.
> >
> > I'm working with various jQ methods but I can't seem to get this
working.
> > Does anyone have input on this?
> >
> >
> > <!----------------//------
> > andy matthews
> > web developer
> > certified advanced coldfusion programmer
> > ICGLink, Inc.
> > [EMAIL PROTECTED]
> > 615.370.1530 x737
> > --------------//--------->
> >
> >
> > _______________________________________________
> > jQuery mailing list
> > [email protected]
> > http://jquery.com/discuss/
> >
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
