problem when clone - jquery

Question

i am using this plugin

Now i am doing a way to clone the select dropdown. A button to add cloned divs. So, an user have a initial dropdown, but he can add more. The div is cloned.

The main problem is that when i clone the div, the dropdown is associated to initial dropdown and no to the new, that is cloned. The result is: all dropdowns of the new cloned divs have the event to open the select associated to the first.

enter image description here

Script to call the plug in

<script language="javascript" type="text/javascript">
$(document).ready(function() {
        $(".mydds").msDropDown();
})

</script>

script to clone

<script type="text/javascript">
    $(document).ready(function() {
        $('#adicionar').live('click', function(){
            var num = $('.linguas').length;
            var newNum = new Number(num + 1);

            var newElem = $('#copiar' + num).clone(true).prop('id', 'copiar' + newNum);

            newElem.children(':text').prop('name', "myformdata[languages" + newNum + "]").prop('languages', 'languages' + newNum).val('');
            $('#copiar' + num).after(newElem);
            $('#apagar').prop('disabled', '');

        });

</script>

Any idea to solve the problem? Basically i think the event associated to dropdown is not copied... thanks

Gabriele Petrioli · Accepted Answer · 2011-06-10 17:15:11Z

3

Assuming you have only one dropdown per cloned element, you can use

$('#adicionar').live('click', function(){
    var num = $('.linguas').length;
    var newNum = new Number(num + 1);

    var newElem = $('#copiar' + num).clone(true, true).attr('id', 'copiar' + newNum);

    var id = newElem.find('select').msDropDown().data('dd').get('id');

    newElem.find('[id]').each(function(){
        $(this).attr('id',this.id.replace(id,'customid_' + newNum,'g') );
    });


    $('#copiar' + num).after(newElem);

    newElem.find('select').msDropDown();
});

The problem is that the plugin gives an id to the initial select element, and uses that id to create other elements and also to refer to its related select.

You will need to modify all those ids as well as the reference.. (the code above does just that..)

demo http://jsfiddle.net/gaby/CXBZR/3/

edited Jun 10, 2011 at 17:15

answered Jun 10, 2011 at 0:51

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user455318 Over a year ago

chrome, safari and IE8 don't work. only in firefox. Almost :)

Gabriele Petrioli Over a year ago

@user455318, updated code (made it more verbose) and demo and it seems to work in all browsers now...

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

In your script you are calling .clone(true). This true parameter is cloning the events and data.

From the API

.clone( [ withDataAndEvents ] )
withDataAndEvents: A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

If you remove this, or set it to false, this will stop the events from being cloned onto your new divs.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 9, 2011 at 23:42

Alastair Pitts

19.6k9 gold badges72 silver badges98 bronze badges

3 Comments

user455318 Over a year ago

but i need to clone the events. the problem is that the div is cloned but the event no. If i do what you suggest, only the first dropdown works. I need to clone the div and the event.

Alastair Pitts Over a year ago

Ok, I'm confused. is the event copied or not? In your original question it appears that you are saying it's copied.

Alastair Pitts Over a year ago

@user455318: No probs. Sorry I mis-understood the question.

Collectives™ on Stack Overflow

problem when clone - jquery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related