Jquery错误-开关链接

Question

我有一个链接文本，作为一个开关开关按钮，我试图使用它没有任何页面重新加载。当关闭时，链接具有与打开状态不同的类、url和文本值。(即打开显示绿色/关闭显示红色)

下面是我正在使用的jquery代码。

$('.off').click(function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('off','on');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched." ) { element.attr('href', newlink); element.text('on'); element.attr('class', 'on'); }
    });
    return false;
            });
$('.on').click(function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('on','off');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched off." ) { element.attr('href', newlink); element.text('off'); element.attr('class', 'off'); }
    });
    return false;
          });

这个HTML元素是这样的
<a href="engine.php?id=15&amp;switch=on" class="on">on</a>

所以，如果元素看起来完全像上面被点击，按钮被切换到关闭和所有的链接属性被改变，但是当我点击第二次(在新的属性的链接)，它使ajax请求，它给我的结果在#front，但它不会改变链接的属性，因为它应该。

有什么问题吗?

Answer 1

你正在切换类，所以当它最初加载.on不存在，所以没有事件注册。您可以通过使用事件委托来解决这个问题。

$(document).on('click', '.off', function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('off','on');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched." ) { element.attr('href', newlink); element.text('on'); element.attr('class', 'on'); }
    });
    return false;
            });
$(document).on('click', '.on', function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('on','off');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched off." ) { element.attr('href', newlink); element.text('off'); element.attr('class', 'off'); }
    });
    return false;
   });

顺便说一下，尽量不要使用document，而是使用DOM中存在的任何容器的选择器。即$('.somContainerSelector').on('click', '.off', function() {..

您可以尝试简化从两个处理程序中的重复代码到一个处理程序$(document).on('click', '.on, .off', function() {，因为区别在于文本on和off。

Answer 2

当您执行$('.off').click(function() {...时，单击处理程序附加到在执行代码时存在的的所有.off元素。当这段代码执行时，没有.off元素。

你可能应该只使用一个click处理程序，然后有一些逻辑来确定它当前处于哪个状态，或者将状态存储在一个变量中。

Answer 3

试着看看这是否有效

$(document).on('click', '.on, .off', function() {
        var element = $(this);
        var link = $(this).attr('href');
        var newlink = link.replace('on','off');
        $.get(link, function(data) {
           $('#front').html(data).center().show();
           $('#background').show();
              if( data == "Button switched off." ) { element.attr('href', newlink); element.text('off'); element.removeClass('on').addClass('off'); } 
              else if( data == "Button switched." ) { element.attr('href', newlink); element.text('on'); element.removeClass('off').addClass('on'); }
        });
        return false;
     });

Answer 4

试一下这个代码。将两个点击函数替换为下面这个函数:

$(document).on('click', '.on, .off', function () {
        var $element = $(this);
        var newmode = $element.hasClass('on') ? "off" : "on";
        var link = $(this).attr('href');
        var newlink = (link.match('on')) ? link.replace('on','off') : link.replace('off', 'on');
        $.get(link, function (data) {
                $('#front').html(data);
                $('#front').center().show();
                $('#background').show();
                if (data == "Button switched" + ((newmode == "off") ? " off" : "") + ".") {
                    element.attr('href', newlink);
                    element.text(newmode);
                    element.removeClass('on off').addClass(newmode);
                }
            });
        return false;
    });

结果如下:

1. 将click函数更改为$.on()函数。我认为来回切换类会导致$.click()函数失去对元素的绑定。$.on()应该防止
2. 删除你在两个点击函数中的重复代码并将它们统一在一起。

Answer 5

问题是，即使您更改了类，它仍然具有off的绑定，并且从未真正获得on的绑定。

在DOM上应用绑定准备好了。因为你的标签只有off类，不应用和关闭将始终触发。

这样使用.on()绑定:

$(document).on('click', '.off', function(){...})
$(document).on('click', '.on', function(){...})
//Document should be a selector of the closest non-dynamic parent.

，它会工作。

同样，由于代码几乎相同，您可以将其封装在一个函数中:

$('.off').click(function() {
    var element = $(this);
    var link = element.attr('href');
    var isOff = element.hasClass('off')
    var newlink = isOff ? link.replace('off','on') : link.replace('on','of')
    $.get(link, function(data) {
        $('#front').html(data);
        $('#front').center().show();
        $('#background').show();
        if( data == "Button switched." ) { 
            element.attr('href', newlink);
            element.text(isOff ? 'on' : 'off');
            element.toggleClass('on off'); 
        }
    });
    return false;
});