Javascript 在两次 HTML 注入后停止工作
Javascript stops working after two HTML injects
我正在为我的网站创建一个聊天功能。它的左侧是对话,右侧是用户列表。当用户的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})
这是初始页面加载和第一个 AJAX 请求之间的 HTML 差异检查。然后这里是第一个 AJAX 请求和最后一个请求之间的 DiffCheck,然后事情停止工作。您会注意到第一个请求和第二个请求之间没有任何变化,但由于某种原因,事情停止工作。为什么?
您使用的是旧式 jQuery 事件钩子,这些钩子在页面就绪时进行评估,并引用特定的 DOM 元素。但是这些 DOM 元素会被你的重新加载所取代,因此事件不再绑定到任何东西。
相反,您应该使用新样式的委托事件:
$('html').on('click', 'div.message-text', function(e) ...
相关文章:
- 正在注入包含JS的HTML
- Meteor:在启动时将html注入客户端文件
- 注入的HTML仅在Dom中解释为字符串
- 在包含脚本的地方注入HTML
- 非侵入性Javascript HTML注入
- 将html注入<李>使用js或jquery
- Electron:将原始html注入BrowserWindow
- Html注入javascript代码
- Javascript 在两次 HTML 注入后停止工作
- 使用 jq 通过 html() 或 append() 将 HTML 注入到另一个元素 注入的元素不能被 jq 访问,但使
- 在没有服务器端资源的情况下将 HTML 注入到 HTML 文档中.(离线)
- 函数在jQuery ajax html注入后不起作用
- 使用JavaScript文件将HTML注入页面
- 使用Jquery的HTML注入
- 如何使用Cordova将HTML注入页面'的InAppBrowser
- 我可以将HTML注入iFrame吗
- jQM:只有一些转换在动态HTML注入后才起作用
- 如何将html注入Angular UI引导弹出窗口
- jQuery html注入列表没有包装
- 如何将html注入iframe,并在jquery-ui对话框中显示