Question

我有问题，我刚登录时无法注销（无需重新加载页面）。我刚刚退出时无法登录（再次使用页面重新加载它可以工作）。好吧，我想在重新加载导航后，他会忘记注销的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>

我的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>

登录后，我的用户将获得身份验证并重新加载导航，仅显示注销。元素未动态创建 - ＆gt;这是静态的

Answer 1

当您重新加载navbar时，DOM元素将被删除，事件处理程序也会被删除

您可以.on()方法使用Event Delegation方法

$(document).on('click', '#logout', function() {
    $.ajax({
        url : 'accounts/logout/',
        success : function(json) {
            console.log(json)
            });
        },
    });
});

$(document).on('submit', '#loginform', function(event) {
    event.preventDefault();
    login();
});

代替document，你应该使用最近的静态容器。

Answer 2

在此代码执行$('#usergui').load(document.URL + ' #usergui');后，您需要将onclick事件处理程序“重新添加”到logout标记。

您的脚本应如下所示：

<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();

我如何使用jQuery找到丢失的元素

2 个答案: