Javascript append（）和操作内部内容

就像在facebook上一样，我想制作一个边栏，上面有朋友的名字，用户可以在其中单击打开一个相应的消息块，其中包含一个消息选项卡，打开一个包含以前消息的弹出框，并形成新消息

HTML

我对.append有一个问题，并且无法处理其中的内容。这段代码在第一次尝试时运行良好。但是，当我创建一个新的消息选项卡时，以前创建的选项卡不会响应。以下是我所拥有的：

JavaScript

执行此操作时：

$('.message_tab').on('click', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

您不仅向刚刚创建的元素添加了一个单击处理程序，还向以前创建的所有元素添加了另一个单击处理程序。这意味着上一个选项卡现在有两个单击处理程序，它们都执行以下操作：

$(this).siblings('.message_flyout').toggle();

这将基本上相互抵消

不是每次创建元素时都添加一个新的处理程序，而是为整个页面创建一个处理程序：

$(document).on('click', '.message_tab', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

当页面加载时，而不是在“.chat_list”单击处理程序中执行此操作一次。这样，所有匹配的“.message_tab”元素只有一个顶级处理程序

因此，你最终会得到更像这样的结果：

$('.chat_list').click(function(){
    var user_id = $(this).attr('value');
    var el = $('<div class = "message_block">'+
        '<div class = "message_tab">'+ '</div>' +

    '<div class = "message_flyout">' +
        '<div class = "message_content">' +
            '<div class = "message_header">'+ '</div>' +
                '<div class = "conversation_scroll">' +
                    '<div class = "scroll_content">' + '</div>' +      '</div>' +
                        '<div class = "message_form">' +
                        "<form method= 'POST' action= 'http://localhost:8000/newtch' accept-charset= 'UTF-8'>" + "<input name='_token' type='hidden' value='2rS54FJZJZhWPplLmBJSH4CsID7Pgec7iPsDtrnm'>" +
                            '<div class = "message_form">' +
                                 "<input class='input-mini' placeholder='Type a message' name='status' type='text'>" +
                            '</div>'+
                         "</form>" +
                    '</div>'+
                '</div>'+
            '</div>'+
    '</div>');

    $('.docking_tabs').append(el);
});

$(document).on('click', '.message_tab', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

$(document).on('click', '.message_header', function(){
    console.log('clicked');
    $(this).closest('.message_flyout').toggle();
})

---

嗨，我在这里做了一些尝试：

尝试替换：

$('.message_tab').on('click', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

$('.message_header').on('click', function(){
    console.log('clicked');
    $(this).closest('.message_flyout').toggle();
})

为此：

el.find('.message_tab').on('click', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

el.find('.message_header').on('click', function(){
    console.log('clicked');
    $(this).closest('.message_flyout').toggle();
});

这里有一个例子：。如果这是您需要的，请告诉我：

---

祝你好运

您的代码工作正常，我看不出问题出在哪里，您所说的以前制作的选项卡没有响应是什么意思？？？@ZakariaAcharki当我制作两个消息选项卡时，以前的选项卡将不会打开切换相应的消息弹出按钮。

$('.message_tab').on('click', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

$('.message_header').on('click', function(){
    console.log('clicked');
    $(this).closest('.message_flyout').toggle();
})

el.find('.message_tab').on('click', function(){
    $(this).addClass(user_id);
    $(this).siblings('.message_flyout').toggle();
});

el.find('.message_header').on('click', function(){
    console.log('clicked');
    $(this).closest('.message_flyout').toggle();
});