Question

我想要从旧的元素中克隆另一个元素。但它会崩溃我克隆的所有元素。

这是JS

$(document).on('click','#addEm,.collap', function (e) {

    if($(this).is('#addEm')){

        var employerForm = $(this).closest('#employer').find('#cloneEm');

        var cloneDiv = employerForm.clone();
        $('#employerList').append(cloneDiv);
    }
    if($(this).is('.collap')) {

        if($(this).hasClass('glyphicon-plus')) {

            $(this).removeClass('glyphicon-plus');
            $(this).addClass('glyphicon-minus');
            $(this).closest('#employer').find('.employerForm').collapse('hide');
        }else if($(this).hasClass('glyphicon-minus')){

            $(this).removeClass('glyphicon-minus');
            $(this).addClass('glyphicon-plus');
            $(this).closest('#employer').find('.employerForm').collapse('show');
        }
    }

});

HTML：

    <div class="tab-pane" id="employer">

    <div class="panel-body ">
        <div class="text-right"><a id="addEm" class="btn btn-danger btn-md"> Add </a></div>
    </div>

    <div id="employerList">
    </div>

    <div class="panel-heading" id="cloneEm" style="margin-bottom: 15px;">
        <div class="text-right"><a class="collap btn btn-danger btn-xs glyphicon glyphicon-plus"> </a></div>
        <div class="panel-body">
            <div class="collapse employerForm">

                asdfasdfasdf

            </div>
        </div>
    </div>


</div>

Answer 1

似乎您的选择器定位于#employer，这是包含所有链接的列表。

相反，定位#cloneEm似乎有效。

＆＃13;

$(document).on('click', '#addEm,.collap', function(e) {

  if ($(this).is('#addEm')) {

    var employerForm = $(this).closest('#employer').find('#cloneEm');

    var cloneDiv = employerForm.clone();
    $('#employerList').append(cloneDiv);
  }
  if ($(this).is('.collap')) {

    if ($(this).hasClass('glyphicon-plus')) {
      $(this).removeClass('glyphicon-plus');
      $(this).addClass('glyphicon-minus');

      $(this).closest('#cloneEm').find('.employerForm').collapse('hide');
    } else if ($(this).hasClass('glyphicon-minus')) {
      $(this).removeClass('glyphicon-minus');
      $(this).addClass('glyphicon-plus');
      $(this).closest('#cloneEm').find('.employerForm').collapse('show');
    }
  }
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.js"></script>

<div class="tab-pane" id="employer">

  <div class="panel-body ">
    <div class="text-right"><a id="addEm" class="btn btn-danger btn-md"> Add </a></div>
  </div>

  <div id="employerList">
  </div>

  <div class="panel-heading" id="cloneEm" style="margin-bottom: 15px;">
    <div class="text-right">
      <a class="collap btn btn-danger btn-xs glyphicon glyphicon-plus"> </a>
    </div>
    <div class="panel-body">
      <div class="collapse employerForm">

        asdfasdfasdf

      </div>
    </div>
  </div>


</div>

＆＃13;

如何在引导程序折叠中折叠多个克隆元素之一

1 个答案: