javascript - jQuery 克隆() : original content's radio button clicking show/hide not working

Question

我正在使用 jQuery 克隆 HTML 代码，并在附加原始内容被破坏后将其附加到 div，两个单选按钮都未选中，那么我该如何解决这个问题？

你能帮我吗？

jsfiddle

HTML

<div class="contentWrapper">
    <button>clone</button>
    <div class="input-group">
        <div class="content">
            <div class="content-header">
                <label for="one">one</label>
                <input type="radio" class="content-disable-enable" id="one" name="radio" checked>
            </div>
            <div class="content-body">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="content">
            <div class="content-header">
                <label for="two">two</label>
                <input type="radio" class="content-disable-enable" id="two" name="radio">
            </div>
            <div class="content-body">
                <input type="text" class="form-control disabled">
            </div>
        </div>
    </div>
</div>

JS

$('.content-disable-enable').click(function () {
    $('.content-disable-enable').closest('.content').find('.content-body').find('.form-control').addClass('disabled');
    $(this).closest('.content').find('.content-body').find('.form-control').removeClass('disabled');
});

$('button').click(function () {
    var inputFroupClone = $('.input-group:first-of-type').clone();
    $('.contentWrapper').append(inputFroupClone);
});

Answer 1

您的代码中遗漏了很多东西。简单地进行克隆就会破坏单选按钮的功能。因为当您克隆单选按钮时，单选按钮将具有相同的名称。另外，如果您想要深度克隆，例如需要具有相同的点击事件，那么您必须使用 true ，例如 clone(true) 。克隆后，您必须更改单选按钮的名称。这样就不会影响其他单选按钮的功能。

在第二部分中，您将使用通用 css 类名禁用备用文本框。这也会影响克隆文本框。你也必须改变这个逻辑。看我的代码，我已经按照上面的场景做了修改。

  var count = 1;
  $('.content-disable-enable').click(function () {
       $(this).closest('.input-group').find('.content').find('.content-body').find('.form-control').addClass('disabled');
       $(this).closest('.content').find('.content-body').find('.form-control').removeClass('disabled');
  });

  $('button').click(function () {
     count = count + 1;
     var inputFroupClone = $('.input-group:first-of-type').clone(true);
     finalClone = inputFroupClone.find('input[type=radio]').attr('name','test'+count).find('input[type=text]').attr('name','test'+count);
     $('.contentWrapper').append(inputFroupClone);
  });

DEMO