两次 HTML 注入后 Javascript 停止工作

Question

我正在为我的网站创建聊天功能。它的左侧是对话，右侧是用户列表。当点击用户的 div 时，他们的 ID 被发送到 Django 后端，返回完整的 HTML，我调用 $('html').html('') 然后调用 $('html').html(data') 其中data 是完整的，返回的由 Django 呈现的 HTML。

当我单击用户一次时，整个页面都会刷新，并且我能够按预期执行所有与 JS 相关的事情。当我再次重新加载页面时，将使用返回的 HTML 重新加载 HTML，但 JS 功能完全停止。当我检查开发人员工具中的元素时，JS 文件都在那里并加载到源选项卡中。

JavaScript 看起来像这样：

$(document).ready(function(){

    console.log("******LOAD*********")
    var d = $('div.profile-detail');
    d.scrollTop(d.prop("scrollHeight"));

    $('div.message-text').click(function(e){
        var id = $(this).attr('id');

        $.ajax({
        url: '#',
        method: 'GET',
        data: {'id': id,
                'task': 'get_messages'},
        dataType: 'html',
        success: function(data){
            $('html').html('');
            $('html').html(data);
            $('div.section-img').attr('id', id)
        },
        error: function(){
            console.log("Oh no!");
        }
        })

    })


    $('#message-text').keypress(function(e){
        if(e.which == 13 && !e.shiftKey){
            e.preventDefault();
            $.ajax({
                url: '#',
                method: 'GET',
                data: {'message': $('#message-text').val(),
                        'task': 'post-message',
                        'id': $('div.section-img').attr('id')
                },
                success: function(){
                    $('div.profile-section4').before(
                        '<div class="profile-section2">' +
                        '<p><span class="date-span">'+ new Date().toLocaleString() +'</span><br/><br/>' +
                            $('#message-text').val() +
                        '</p>'
                    ),
                    $('#message-text').val('')
                    d.scrollTop(d.prop("scrollHeight"));
                },
                error: function(){
                    console.log("failure");
                }
            })
        }

    });

})

我对 Django 的看法是这样的：

def view_messages(request):
    messages = Message.objects.filter(message_to=request.user, job_id=None).distinct('message_from')
    contact_user_ids = messages.values_list('message_from', flat=True).distinct()

    contacts = User.objects.filter(id__in=contact_user_ids)

    messages = Message.objects.filter(
        Q(message_to=request.user) & Q(message_from_id=contact_user_ids[0]) & Q(job_id=None) | Q(
            message_to=contact_user_ids[0]) & Q(
            message_from_id=request.user) & Q(job_id=None)).order_by('time_date')

    for message in messages:
        if message.message_from == request.user:
            message.sender = True
    try:
        current_chat_user = User.objects.get(id=contact_user_ids[0])
    except:
        current_chat_user = User.objects.get(id=int(request.GET['id']))

    if request.is_ajax():
        if request.method == 'GET':
            if request.GET['task'] == 'get_messages':
                messages = Message.objects.filter(
                    Q(message_to=request.user) & Q(message_from_id=int(request.GET['id'])) & Q(job_id=None) | Q(
                        message_to=int(request.GET['id'])) & Q(
                        message_from_id=request.user) & Q(job_id=None)).order_by('time_date')

                current_chat_user = User.objects.get(id=request.GET['id'])
            else:
                m = Message(message_from=request.user, message_to_id=int(request.GET['id']), message=request.GET['message'])
                m.save()

    return render(request, 'freelancestudent/general/messages.html', {'messages': messages,
                                                                      'messages_from': contacts,
                                                                      'current_chat_user': current_chat_user})

Here 是初始页面加载和第一个 AJAX 请求之间的 HTML 的 DiffCheck。然后here 是第一个 AJAX 请求和事情停止工作之前的最后一个请求之间的 DiffCheck。您会注意到第一个请求和第二个请求之间没有任何变化，但由于某种原因事情停止工作。为什么？

Answer 1

您使用的是旧式 jQuery 事件挂钩，它在页面准备就绪时进行评估，并引用特定的 DOM 元素。但是这些 DOM 元素会被您的重新加载所取代，因此该事件不再绑定到任何东西。

相反，您应该使用新型委托事件：

$('html').on('click', 'div.message-text', function(e) ...