Javascript在两次HTML注入后停止工作

我正在为我的网站创建聊天功能。它的左边是对话，右边是用户列表。当用户的div被点击时，他们的ID被发送到Django后端，返回完整的HTML，我调用

$（'HTML'）.HTML（'''）

，然后调用

$（'HTML'）.HTML（data'）

，其中

数据

是Django呈现的完整的返回HTML

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

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

    });

})

---

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

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

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

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

---

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

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

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

---

你的问题是否与锚有关？在AJAX请求中，其中

url:#“

？我不这么认为。我将URL更改为

/messages/

，问题仍然以相同的方式存在。查看返回的ajax块（messages.html）的来源可能会有所帮助。您的问题是否与锚相关？在AJAX请求中，其中

url:#“

？我不这么认为。我将URL更改为

/messages/

，但问题仍然以相同的方式存在。查看返回的ajax块（messages.html）的源代码可能会有所帮助。很酷，我永远不会找到这个。丹尼尔，我还想感谢你对我提出的所有问题的帮助。我真的很感激。酷，我永远也找不到这个。丹尼尔，我还想感谢你对我提出的所有问题的帮助。我真的很感激。