jquery 中的克隆行不起作用

Question

我正在尝试复制 div 并将其添加到父 div 的开头。这是我的代码...我无法找出问题所在？

//Ad row 
function addRow(btn) {

  var CopiedRow = $(this).closest('.itemRow').clone(true);
  $(this).parent().prepend(CopiedRow);

}

<div class="show_hide" style="display: none;">
  <hr />
  <div class="form-group itemRow">
    <div class="col-md-6">
      <input type="text" name="add_qty[]" class="form-control input-sm" placeholder="Beschreibung der auszuführenden Arbeit!" />
    </div>
    <div class="col-md-2">
      ***********************
    </div>
    <div class="col-md-2 nopadding">
      <select class="form-control input-sm s2_basic">
        <option class="text-muted" value="#" selected>****************</option>
      </select>
    </div>
  </div>
  <a class="col-md-1" href="javascript:void(0);" onclick="addRow(this);"><i class="fa fa-plus"></i></a>



</div>

Answer 1

两个问题：

您正在从 onclick 属性调用 addRow，将单击的按钮元素作为参数传递。

但是您没有使用 addRow 中的参数，您使用的是this。如果您使用 btn 参数，该代码将起作用。如果您使用现代事件技术而不是 onclick 连接函数，它也会起作用，因为那样 this 会指的是被点击的按钮。
您正在使用 .closest 试图找到 .itemRow，但 .itemRow 不是祖先按钮的元素，它是兄弟。您可以将 .prev() 与您当前的结构一起使用。

所以要么使用 btn（和 prev）：

//Ad row 
function addRow(btn) {
  var CopiedRow = $(btn).prev().clone(true);
  $(btn).parent().prepend(CopiedRow);

}

<div class="show_hide">
  <hr />
  <div class="form-group itemRow">
    <div class="col-md-6">
      <input type="text" name="add_qty[]" class="form-control input-sm" placeholder="Beschreibung der auszuführenden Arbeit!" />
    </div>
    <div class="col-md-2">
      ***********************
    </div>
    <div class="col-md-2 nopadding">
      <select class="form-control input-sm s2_basic">
        <option class="text-muted" value="#" selected>****************</option>
      </select>
    </div>
  </div>
  <a class="col-md-1" href="javascript:void(0);" onclick="addRow(this);"><i class="fa fa-plus"></i>click me</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者放弃 onclick 并使用现代事件连接（和 .prev）：

$(".addrow").on("click", function() {
  var CopiedRow = $(this).prev().clone(true);
  $(this).parent().prepend(CopiedRow);
});

<div class="show_hide">
  <hr />
  <div class="form-group itemRow">
    <div class="col-md-6">
      <input type="text" name="add_qty[]" class="form-control input-sm" placeholder="Beschreibung der auszuführenden Arbeit!" />
    </div>
    <div class="col-md-2">
      ***********************
    </div>
    <div class="col-md-2 nopadding">
      <select class="form-control input-sm s2_basic">
        <option class="text-muted" value="#" selected>****************</option>
      </select>
    </div>
  </div>
  <a class="col-md-1 addrow" href="javascript:void(0);"><i class="fa fa-plus"></i>click me</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

两个问题：

1) 您的可点击元素不在 <div class="form-group itemRow">...</div> 内，因此 $(this).closest('.itemRow') 将是一个空的 jQuery 集合。尝试移动 .itemRow div.

内的可点击元素

2) function addRow(btn) {...} 被传递 this （可点击的元素），它在函数内部变为 btn ..... 但你不使用 this.使用 .itemRow div 内的按钮，尝试：

function addRow(btn) {
    $(btn).closest('.itemRow').clone(true).prependTo($(btn).closest(".show_hide"));
}

jquery 中的克隆行不起作用

Clone Row in jquery not working

html

jquery

prepend