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();
});

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

Answer 2

console.log($('#chat').find(".close"));以确定选择器是否有效

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

Answer 3

尝试以下代码： -

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

有关更多信息： -

https://learn.jquery.com/events/event-delegation/

事件委托是指使用事件传播的过程（冒泡）处理DOM中更高级别的事件而不是事件发生的元素。它允许我们附加单个现在或将来存在的元素的事件监听器。

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

3 个答案: