jQuery的错误 - 开启/关闭链接

Question

我有充当开关开/关按钮的链接文字，我想使用它没有任何页面重载。 关闭时，链接具有与开启状态不同的特定类别，网址和文本值。 （即开启它出现绿色/关闭它显示为红色）

略低于你有我使用的那一刻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() {..

您可以尝试从具有2个处理器重复代码简化到一个处理器$(document).on('click', '.on, .off', function() {的差异是所有的文字on和off。

Answer 2

当你做$('.off').click(function() {...，单击处理程序连接到其在​​代码被执行时存在所有.off元素。执行此代码时，不存在.off元素。

你或许应该只使用一个单一的click处理程序，然后有一些逻辑，以确定它是目前在该状态下，或存储在一个变量的状态。

Answer 3

问题是，即使您更改了类，它仍然具有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. 

，它会工作。

此外，由于代码几乎是一样的，你可以在1个功能包起来：

$('.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; 
}); 

Answer 4

尝试，看看这是否正常工作

$(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 5

给这个代码一试。这种单一的一个替换你的两个点击功能：

$(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（）应该可以防止这种情况发生。
2. 删除两个点击函数中的重复代码，并将它们统一在一起。