javascript - 在将 html 添加到另一个列表后，将 html 添加到无序列表中的列表项

Question

我有一个像这样的无序列表:

<ul id="sortable2" class="connectedSortable">
</ul>

偶尔，我会将列表项从 sortable1 拖到这个 sortable2 中，像这样修改它:

<ul id="sortable2" class="connectedSortable">
        <li class="ui-state-default">First</li>
        <li class="ui-state-default">Second</li>
        <li class="ui-state-default">Third</li>
</ul>

我的问题是，一旦拖入 sortable2，如何在这些列表项中附加以下 html:

<a title='delete' class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>

我想使用 jquery，到目前为止，我已经尝试在 UL 更改的 dom 树上附加和添加内容，但它出错了。感谢您的帮助。

Answer 1

在这些情况下，如果您提供问题的运行示例会有所帮助。 我猜您正在使用 jQuery UI 和 jQuery Sortable。

您可以使用 Sortable 的“接收”事件并将您的 HTML 附加到已更改的元素。

$("#sortable1, #sortable2").sortable({
  connectWith: ".connectedSortable",
  receive: function(event, ui) {
    $(ui.item).append('<a title="delete" class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>');
  }
}).disableSelection();

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

jQuery UI 也有大量关于 Sortable 的文档和 Draggable , 请务必查看事件部分以获取对您有帮助的更多信息。