javascript - 克隆时的问题 - jquery

Question

我正在使用这个 plugin

现在我正在做一种克隆选择下拉列表的方法。添加克隆 div 的按钮。因此，用户有一个初始下拉列表，但他可以添加更多。 div 被克隆。

主要问题是，当我克隆 div 时，下拉菜单与初始下拉菜单相关联，而与新的下拉菜单无关，即克隆。结果是:新克隆的 div 的所有下拉菜单都有打开与第一个关联的选择的事件。

调用插件的脚本

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

</script>

要克隆的脚本

<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>

有解决问题的办法吗？基本上我认为与下拉菜单相关的事件没有被复制......谢谢

Answer 1

假设每个克隆元素只有一个下拉菜单，您可以使用

$('#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();
});

问题在于插件为初始 select 元素提供了一个 id，并使用该 id 来创建其他元素并引用其相关的 select。

您将需要修改所有这些 ID 以及引用..(上面的代码就是这样做的..)

演示 http://jsfiddle.net/gaby/CXBZR/3/