jQuery/JS - 隐藏特定的动态创建 elements/buttons

Question

我构建了一个具有消息评级功能的简单聊天应用程序。我想通过隐藏相应的评级按钮来防止自我评级。因此，例如在 Bob 的屏幕上，Bob 的消息旁边不应有评级按钮。

我试图通过比较#name 和#user-name 来了解这一点。如果它们相等，评级按钮应该被隐藏。但看起来我做的不正确。

主要问题是消息 div .standard-msg 是动态创建的，所以我需要类似 "on-dom-change".

的东西

每一个帮助appriciated。

$("#standard-msg").on("DOMSubtreeModified", function() {

  $('.standard-msg').each(function() {
    if ($('#name').val() == $(this).find('#user-name').text()) {
      $('button').hide();
    }
  });
});

<div id="chat-wrapper" class="wrapper">
  <div class="message-box" id="message-box">
    <div class="standard-msg">
      <button class="rating like-btn">Like</button>
      <button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Bob</span> : <span class="user-message">hi</span>
    </div>
    <div class="standard-msg">
      <button class="rating like-btn">Like</button>
      <button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Alice</span> : <span class="user-message">hello</span>
    </div>
  </div>
  <div class="panel">
    <input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" />
    <input type="text" name="message" id="message" placeholder="Message" maxlength="80" />
    <button id="send-btn" class="btn">Send</button>
  </div>
</div>

Answer 1

如果按钮是在页面加载后添加到页面的，那么它们将不会响应引用它们的任何代码（在创建它们之前的页面中）。这是因为在创建按钮时会为按钮添加新的事件侦听器，并且它们不会以某种方式接收任何比它们更旧的代码。

要解决这个问题，只需在将按钮添加到页面时动态添加代码，它就会起作用。

例如

var s = "$('#standard-msg').on('DOMSubtreeModified', function() { $('.standard-msg').each(function() { if ($('#name').val() == $(this).find('#user-name').text()) { $('button').hide(); } }); }); ";

然后附加到页面，

$("body").append(s);

jQuery/JS - 隐藏特定的动态创建 elements/buttons

jQuery/JS - Hiding specific dynamically created elements/buttons

javascript

jquery

dynamic

hide