[英]How do i find a lost element with jQuery
Well I have the problem, I can't log out when i just log in (without reloading the page). 好吧,我有问题,我仅在登录时(无法重新加载页面)无法注销。 And I cant log in when I just logged out (again with page reload it works). 而且我刚注销时也无法登录(同样可以重新加载页面)。 Well I think after reloading the nav, he forgets the id of logout or something? 好吧,我认为在重新加载导航后,他会忘记注销的ID或其他内容吗?
<script>
logout = $('#logout')
loginform = $('#loginform')
logout.click(function () {
$.ajax({
url: 'accounts/logout/',
success: function (json) {
console.log(json)
});
},
});
});
loginform.on('submit', function (event) {
event.preventDefault();
login();
});
function login() {
$.ajax({
url: 'accounts/login/',
success: function (json) {
console.log(json)
/* Reloades the navbar */
$('#usergui').load(document.URL + ' #usergui');
}
});
}
;
</script>
My HTML: 我的HTML:
<div id="usergui">
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a id="logout"> </span>
Logout
</a></li>
{% else%}
<li><a> </span>
Login
</a></li>
<li><a> </span>
Register
</a></li>
{% endif %}
</ul>
</div>
After Login my user gets authenticated and reloading the nav make only logout appear. 登录后,我的用户通过身份验证并重新加载导航,使仅注销出现。 The Element wasn't created dynamicaly-> it's static 元素不是动态创建的->它是静态的
As you are reloading the navbar
the DOM element are removed and so does there event handler 重新加载navbar
,将删除DOM元素,事件处理程序也将被删除
You can use .on()
method with Event Delegation approach 您可以将.on()
方法与事件委托方法一起使用
$(document).on('click', '#logout', function() {
$.ajax({
url : 'accounts/logout/',
success : function(json) {
console.log(json)
});
},
});
});
$(document).on('submit', '#loginform', function(event) {
event.preventDefault();
login();
});
In place of document
you should use closest static container. 代替document
您应该使用最近的静态容器。
You need to "re-add" the onclick event handler to the logout tag after this code executes $('#usergui').load(document.URL + ' #usergui');
在此代码执行$('#usergui').load(document.URL + ' #usergui');
之后,您需要将onclick事件处理程序“重新添加”到注销标签$('#usergui').load(document.URL + ' #usergui');
. 。
Your script should look something like this: 您的脚本应如下所示:
<script>
function doButtonHandlers(){
logout = $('#logout');
loginform = $('#loginform');
logout.click(function () {
$.ajax({
url: 'accounts/logout/',
success: function (json) {
console.log(json);
});
},
});
});
loginform.on('submit', function (event) {
event.preventDefault();
login();
});
}
function login() {
$.ajax({
url: 'accounts/login/',
success: function (json) {
console.log(json)
/* Reloades the navbar */
$('#usergui').load(document.URL + ' #usergui');
doButtonHandlers();
}
});
};
doButtonHandlers();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.