克隆时的问题 - 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/

Answer 2

在您的脚本中，您调用的是.clone(true)。这个true 参数正在克隆事件和数据。

来自API

.clone( [ withDataAndEvents ] )
withDataAndEvents：一个布尔值，指示 事件处理程序是否应该 与元素一起复制。作为 jQuery 1.4，元素数据将是 也复制了。

如果您删除它或将其设置为 false，这将阻止事件被克隆到您的新 div 中。