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

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添加元素时,您必须在此处尝试事件委派:

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

事件委托允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有后代触发,无论这些后代现在是存在还是将来添加.