Question

我正在尝试建立一个聊天界面，并且编写了一个函数，该函数在另一个<ul>中显示一个<li>的{{1}}。该函数按需要运行，但仅运行一次。也就是说，每次单击时，它仍会切换元素类，但不会附加<ul>。

<li>

这是jquery函数

<div class="m_window">
<div class="m_contacts">
<% a.forEach(function(hombre){ %>
  <ul class="message">Messages received from <%= hombre.username %>
    <% message.forEach(function(message){ %>
        <% if(message.sender.id.equals(hombre.id) && message.receiver.id.equals(currentUser._id)){%>
          <li><%= message.text %></li>
        <% } %>
    <% }); %>
  </ul>
<% }); %>
</div>
<div class="m_chat">
  <ul class="list2">
  </ul>
</div>
</div>

其工作方式是，单击$('body').on('click', '.message', function() { $('.list2').empty(); $(this).addClass('selected'); $('.list2').append($('.selected > li')); $(this).removeClass('selected'); });（联系人）以显示其消息。您单击另一个联系人，它会执行相同的操作。但是，一旦我单击“已访问”的联系人，它就不再显示消息了吗？ 为什么每个<ul>仅附加一次消息？

Answer 1

每次单击都会触发侦听器，但是您将.selected消息移至.list2。因此，第二次点击不会执行任何操作，因为<li>s中的<ul>已经消失。

因此您可以先创建clone()，然后再创建appendTo(...)

有关工作示例，请参见下面或此处的可运行示例：https://codesandbox.io/s/mqjw9jpj0j

对于克隆上的jQuery文档：https://codesandbox.io/s/mqjw9jpj0j

如对.append（）的讨论中所示，通常，将元素插入DOM中的某个位置时，会将其从其旧位置移出。

$("body").on("click", ".message", function() {
  $(".list2").empty();
  $(this).addClass("selected");
  // if we do not clone to node is move
  // so no more in ul.messages
  // and so the next move will move nothing
  // see here : https://api.jquery.com/clone/
  $(".selected > li")
    .clone()
    .appendTo(".list2");
  // $(".list2").append($(".selected > li"));
  $(this).removeClass("selected");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="m_window">
    <div class="m_contacts">
      <ul class="message">Messages received from Foo
        <li>
          Hello
        </li>
        <li>
          Another message
        </li>
      </ul>
      <ul class="message">Messages received from Bar
        <li>
          Hello from Bar
        </li>
        <li>
          Bar message
        </li>
      </ul>
    </div>
    <div class="m_chat">
      <ul class="list2">
      </ul>
    </div>
  </div>
</body>

希望它会有所帮助：）

如何使on（）'click'函数无限期运行？

1 个答案: