jquery - 聊天框标题上的关闭按钮不起作用

Question

我制作了一个与静态用户的聊天应用程序。单击用户后，它会打开一个聊天框。但是该聊天框上的关闭按钮不起作用。

我使用 jQuery 来实现这个。

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault();
    var targetUser = ($(this).html());
    $(document).data('chat.targetUser', targetUser);
    var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">&times;</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
    $('#chat').append(user);
    $('#chat').find(".close").click(function() {
      $(this).closest(".user open").hide();
    });
  });
});

Answer 1

当您在运行时将元素附加到 DOM 时，您必须尝试 event delegation这里:

$('#chat').on("click",".close",function(){
      $(this).closest(".user open").hide();
});

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.