[英]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的DiffCheck。 然后這是第一個AJAX請求與最后一個AJAX請求之間的DiffCheck,然后一切停止工作。 您會注意到第一個請求和第二個請求之間沒有任何變化,但是由於某種原因事情停止了。 為什么?
您正在使用舊式的jQuery事件掛鈎,這些掛鈎在頁面准備就緒時進行評估,並引用特定的DOM元素。 但是這些DOM元素將由您的重新加載替換,因此該事件不再綁定任何東西。
相反,您應該使用新式的委托事件:
$('html').on('click', 'div.message-text', function(e) ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.