jQuery/JS - Скрытие определенных динамически созданных элементов/кнопок

Question

Я создал простое приложение чата с функциональностью оценки сообщений. Я хочу предотвратить самооценку, сокрыв соответствующие кнопки рейтинга. Так, например, на экране Боба не должно быть кнопок рейтинга рядом с сообщениями Боба.

Я попытался понять это, сравнив #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);