jQuery克隆和修改GUID

Formstone Classic Selecter - jQuery Clone and Modify GUID

本文关键字：修改 GUID jQuery      更新时间：2023-09-26

是否有可能使用jQuery克隆来增加对象的当前GUID ?

目前，当选择器被初始化时，所有的选择，包括隐藏的，都会被分配一个GUID。

克隆过程只是复制模板div。问题是它也克隆隐藏选择的GUID，这意味着任何动态添加的选择都无法使用，因为多个选择共享相同的GUID。

要在表单上实现所有选择，我使用下面的代码:

$(document).ready(function () {
    $("select").selecter();
});

创建包含select的行克隆的代码如下:

$('.addButton').on('click', function () {
    var $template = $('#Template'),
        $clone = $template
            .clone(true, true)
            .removeClass('hide')
            .removeAttr('id')
            .attr('title', 'DynamicRow')
            .insertBefore($template);
    $("#Form").validate();
    $clone.find('[name="Type[]"]').rules("add", { required: true });     
});

我还包含了下面的HTML来演示正在克隆的内容:

<div class="fieldset">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>
<div class="fieldset hide" id="Template">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>

Formstone经典选择器库位于:

https://github.com/FormstoneClassic/Selecter/blob/master/jquery.fs.selecter.js

我能找到的唯一的解决方案是单独初始化每个表单选择，因此$("select").selecter();不能用作初始化所有选择，包括隐藏的。

<div class="fieldset" id="Types">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>
<div class="fieldset hide" id="Template">
    <div class="col-sm-1">
        <div>
            <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="field">
            @Html.LabelFor(model => model.Type)
            <select name="Type[]" id="Type[]">
                <option value="">Type</option>
                <option value="1">Other</option>
                <option value="2">Maintenance</option>
                <option value="3">Attendance</option>
            </select>
        </div>
    </div>
</div>

初始化第一个选择，我使用$('#Types').find('[name="Type[]"]').selecter();，初始化隐藏克隆选择，我使用$clone.find('[name="Type[]"]').selecter();

相关文章：