Question

我的页面中有一个div，其中包含一个带输入的表（带有id），我在Javascript代码中编写的输入上有一些条件和函数。我要做的是创建一个按钮（添加新的），它在页面中克隆完全相同的div，但在新元素和提交按钮上具有相同的条件和功能，以便分别为每个元素工作。

我试过了：

$('#button-add').bind({  
    click: function()
    {
        $("#repeat").clone().appendTo("#add");
    }                
});

问题是我得到div的相同外观但功能不起作用（因为输入具有相同的id）并且我不能仅提交该块（新div）。

有没有更简单的方法来实现这一目标？

Answer 1

由于您要复制div，因此不应使用ID，因为它们的唯一性会受到影响。但您可以使用css类名（$('.className')）或自定义数据属性（$('[data-my-id=xxx]')）来处理输入，因为它们不需要是唯一的。

其次，您需要克隆div，以便克隆附加到输入的事件。查看.clone([withDataAndEvents] [,deepWithDataAndEvents])（http://api.jquery.com/clone/）的jQuery文档。

Answer 2

以防万一你忽略制作克隆。使用动态id执行此操作的方式。

假设在javascript中使用随机函数为每个元素追加具有不同id的div。

   $('#add-item').on('click', function (e) {
                        var num = Math.floor(Math.random() * 90000) + 10000;
                        var numtd = Math.floor(Math.random() * 50000) + 10000;

                        $('<tr id="trowdynamic_' + num + '">' +
                            '<td>' +
                                '<div class="input-group">' +
                                '<input type="hidden" id="selected_item_' + numtd + '" name="selected_name" />' +
                                    '<input type="text" name="Inv_Itemsdetail" value="" class="Itemsdetail-typeahead_' + numtd + ' input-search" autocomplete="off" data-provide="typeahead" />' +
                                    '<input type="hidden" id="Inv_Itemsdetail_' + numtd + '" class="auto-complete" name="Itemxx[]" />' +
                                    '<span class="input-group-btn">' +
                                        '<a href="#" data-toggle="modal" class="btn btn-primary" data-target="#cardCode05"><i class="fa fa-plus"></i></a>' +

                                    '</span>' +
                                '</div>' +
                            '</td>' +'</tr>').appendTo('#yourcontainer_id');
});

现在使用jQuery调用相同的id元素 - 现在注意这样我的每个元素都以相同的id名称加一个随机数开头。

$('input[id^="selected_item_"]')

Answer 3

由于新div在新空间中创建，即在#add中，选择新div为

#add #repeat
{

}   //  in css

<{1>} jquery使用next or siblings or children等选择新的div

例如

请参阅FIDDLE

创建一个在同一页面中单独工作的克隆div

3 个答案: