CODEWITHSUNDEEP
jquery
ed209
ed209

Reputation: 838

Jquery events not binding to newly cloned fields

I have a form that allows the user to add more fields. I do this by cloning the div that they are in. I do use clone(true) but the problem I am having is that the jquery I use to ensure numeric input doesn't seem to work on the newly cloned fields. When I type in them they change the values in the top set of fields(the one that was cloned) This is my clone function

$('#more_fields').click(function(){
        if(fields >= 5)
        {
            alert("We're Sorry... You can have a maximum of 6 fieldsets for a freightquote request");
        }
        else
        {
            $('.freight_fields:first').clone(true).hide().insertAfter('.freight_fields:last').slideDown('slow');
                var last = $('.freight_fields:last');
                last.append(new_button.clone(true));
                fields++;
        }
        });

And I am using the autonumeric library with the class numbers_only on these fields like this 

$('.numbers_only').autoNumeric({mDec:0});

If any of that was confusing ... when I clone freight_fields (the outer div) which contains field_one and I type in the cloned version of field_one the value in the original is changed and the new one doesn't change. I'm sure it has something to do with the fact that the true I pass only affects the outer div, but there are a lot of fields in this thing and I don't want to have to clone each of them individually in order to bind them.

Upvotes: 1

Views: 274

Answers (1)

plalx
plalx

Reputation: 43718

It is generally unsafe to clone an element that had plugins applied on to inherit the plugins features, unless you know that the plugin was applied to the element in a clone-friendly way.

I strongly advise you to simply clone the element using clone(false) and then reapply the plugin on cloned elements.

Upvotes: 2

Related Questions