Question

就像在facebook上一样，我想创建一个侧边栏，其中包含用户可以单击的朋友名称，以打开包含message_tab的相应message_block，以打开包含先前消息的弹出窗口以及用于新消息的表单。

HTML

<div class = "dock">
    <div class = "docking_tabs">

    </div>
</div>

我遇到了.append（）的问题，并且可以操作里面的内容。这个代码在第一次尝试时工作正常。但是，当我创建一个新的消息选项卡时，之前生成的选项卡不响应。这就是我所拥有的：

的JavaScript

$('.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);

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

Answer 1

执行此操作时：

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

您不仅要为您刚创建的元素添加点击处理程序，还要将另一个点击处理程序添加到之前创建的所有元素中。这意味着＆＃34;之前的标签＆＃34;现在有两个点击处理程序执行此操作：

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

这基本上会相互抵消。

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

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

Answer 2

您好我在这里采取了一些措施：

尝试替换：

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

这是一个例子：https://jsfiddle.net/L3xbyeff/1/。如果您需要，请告诉我:)）

祝你好运！

Jquery .append（）和操作内部内容

2 个答案: