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 尚不存在，因此没有为此注册任何事件。您可以通过使用事件委托(delegate)来解决此问题。

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