Question

我在下面运行initUsers（），有两个几乎相同的点击事件，一个用于ban-btn，另一个用于admin-btn。 ban-btn的click事件只有在我为admin-btn添加click事件之后才有效。添加了admin-btn的click事件后，单击ban-btn时发生的唯一事情就是页面跳了一下。我在function initUsers设置第二次点击事件的方式有什么问题吗？

HTML

<ul id="users-container" class="users admin">
    <!-- BEGIN users -->
    <div class="users-box" data-uid="{users.uid}" data-admin="{users.administrator}" data-username="{users.username}" data-banned="{users.banned}">
        <a href="/user/{users.userslug}">
            <img src="{users.picture}" class="img-thumbnail"/>
        </a>
        <br/>
        <a href="/user/{users.userslug}">{users.username}</a>
        <br/>
        <div title="reputation">
            <i class='fa fa-star'></i>
            <span id='reputation'>{users.reputation}</span>
        </div>
        <div title="post count">
            <i class='fa fa-pencil'></i>
            <span id='postcount'>{users.postcount}</span>
        </div>

        <div>
            <a href="#" class="btn btn-default ban-btn">Ban</a>
        </div>
        <div>
            <a href="#" class="btn btn-default admin-btn">Make Admin</a>
        </div>

的javascript：

function initUsers() {

    updateUserButtons();

    $('#users-container').on('click', '.ban-btn', function() {
        var banBtn = $(this);
        var isAdmin = isUserAdmin(banBtn);
        var isBanned = isUserBanned(banBtn);
        var parent = banBtn.parents('.users-box');
        var uid = getUID(banBtn);

        if (!isAdmin) {
            if (isBanned) {
                socket.emit('api:admin.user.unbanUser', uid);
                banBtn.removeClass('btn-warning');
                parent.attr('data-banned', 0);
            } else {
                bootbox.confirm('Do you really want to ban "' + parent.attr('data-username') + '"?', function(confirm) {
                    if (confirm) {
                        socket.emit('api:admin.user.banUser', uid);
                        banBtn.addClass('btn-warning');
                        parent.attr('data-banned', 1);
                    }
                });
            }
        }

        return false;
    });

    $('#users-container').on('click', '.admin-btn', function() {
        var adminBtn = $(this);
        var isAdmin = isUserAdmin(adminBtn);
        var parent = adminBtn.parents('.users-box');
        // var isBanned = isUserBanned(adminBtn);
        var uid = getUID(adminBtn);


            if (!isAdmin)) {
                socket.emit('api:admin.user.makeAdmin', uid);
                adminBtn.attr('value', 'UnMake Admin').html('Remove Admin');
                parent.attr('data-admin', 1);

            } else {
                bootbox.confirm('Do you really want to remove this user as admin "' + parent.attr('data-username') + '"?', function(confirm) {
                    if (confirm) {
                        socket.emit('api:admin.user.removeAdmin', uid);
                        adminBtn.attr('value', 'Make Admin').html('Make Admin');
                        parent.attr('data-admin', 0);

                    }
                });
            }


        return false;
    });

}

Answer 1

将event.preventDefault();添加到这两个函数中。

喜欢这个

$('#users-container').on('click', '.ban-btn', function(event) {
    event.preventDefault();

    ...
}

将第二个单击事件添加到函数会使第一个事件停止工作

1 个答案: