Question

因此，我尝试将无线电表单元素从一个地方克隆到另一个地方以进行显示，但是还需要更新原始位置中的设置。因此，我使用jQuery clone并将更改事件绑定到克隆元素，以便在克隆版本值更改时更新原始位置。但是，我似乎有一个问题，单选按钮有时不点击。另外我不确定原来的无线电值是否已经改变，因为看着dom并没有告诉我什么。

这是我的代码：http://jsfiddle.net/KNnmp/

JS：

    $( '.edit' ).click( function() {
    var values = $( '.original-location .values' ),
        clonedValues = values.clone( true, true );

    $( '.value', clonedValues ).each( function ( index ) {
        $( this ).on( 'change', function() {
            values.find( '.value' ).eq( index ).click();
        } );
    } );

    // append to location and show settings
    $( '.edit-location .settings' ).append( clonedValues ).hide().slideDown( 'fast' );
} );

HTML：

    <div class="original-location">
    <div class="values">
        <label>On <input type="radio" name="choose" value="on" class="value" /></label><label>Off <input type="radio" name="choose" value="off" /></label>
    </div><!--.values-->
</div><!--.original-location-->

<div class="edit-location">
    <div class="settings"></div><!--.settings-->
</div><!--.edit-location-->

<a href="#" class="edit">Edit</a>

感谢您的光临。

Answer 1

这是您要查找的代码，您的代码中存在以下问题

设置值的方法是错误的
使用change的方式错误
，您必须在添加新群组时更改群组名称

一旦你修复了那些你的代码将会跟随。

$('.edit').click(function () {
    var values = $('.original-location .values'); 
    var clonedValues = values.clone(true, true);

    // changing the name of the cloned radio buttons. so those will become a new group.
    clonedValues.find('input[type=radio]').each(function (index) {
        var name = $(this).prop('name');
        // appending length to the name, so it will become unique name for this group
        $(this).prop('name', name + $('.values').length);
    });

    // append to location and show settings
    $('.edit-location .settings').append(clonedValues).hide().slideDown('fast');
});

// apling change event globally
$('.original-location .values').on('change', 'input[type=radio]', function () {
    // set the original values based on cloned selection
    $("input[name='choose'][value=" + $(this).val() + "]").prop('checked', true);
});

http://jsfiddle.net/KNnmp/1/

点击时jQuery clone radio表单元素问题

1 个答案: