javascript - jquery 类更改时更改 href 函数

Question

我有一个 href 链接，可以连接或断开用户连接。
当用户已连接时，单击链接时必须断开他的连接，另一方面，如果用户尚未连接，则必须连接用户。
我一切顺利，但是当我断开用户连接时，我无法连接他，直到刷新页面。 我有这个 JavaScript 代码:

$(document).ready(function() {
    $('a.disconect').click(function(e) {
        e.preventDefault();
        $(this).css('background', 'url(images/connect.png) no-repeat');
        $(this).removeClass('disconect');
        $(this).addClass('connect');
        //: url(images/rep_usr.png) no-repeat;
        var parent = $(this).parent().parent();
        $.ajax({
            type: 'get'
            , url: 'Save.php?id=enable'
            , data: 'username=' + $(this).attr('id').replace('record-', '')
            , beforeSend: function(data) {
                //alert(data);
            }
            , success: function(data) {
                //alert(data);
            }
        });
    });
});   


$(document).ready(function() {
    $('a.connect').click(function(e) {
        e.preventDefault();

        $(this).css('background', 'url(images/disconnect.png) no-repeat');
        $(this).removeClass('connect');
        $(this).addClass('disconect');
        //: url(images/rep_usr.png) no-repeat;
        var parent = $(this).parent().parent();
        $.ajax({
            type: 'get'
            , url: 'Save.php?id=disable'
            , data: 'username=' + $(this).attr('id').replace('record-', '')
            , beforeSend: function(data) { //alert(data);
                //alert(data);
            }
            , success: function(data) {
                //alert(data);
            }
        });
    });
});

我想在每次单击时调用另一个函数。

Answer 1

您正在尝试动态更改该类，但该类不会映射到在这些类上触发的事件。首先，您应该使用

$(document).on('click', 'a.disconect', function(){

而不是

$('a.disconect').click(function(e) {

因为这会将事件动态映射到添加到 DOM 的任何新类。 https://learn.jquery.com/events/event-delegation/

但更好的解决方案是创建两个按钮和 .hide() 或 .show() (无论您想要激活哪个按钮)。这样您就不必进行不必要的类和背景图像的添加和删除。