1

我有一个链接文本，用作开关按钮，我正在尝试使用它而无需重新加载任何页面。关闭时，链接具有与打开状态不同的某个类、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但它不会再次改变链接的属性，因为它应该。

有什么问题？

4

5 回答 5

2

您正在切换类，因此当它最初加载时.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 中的任何容器的选择器。IE$('.somContainerSelector').on('click', '.off', function() {..

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

于 2013-05-31T20:18:34.733 回答
1

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

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

于 2013-05-31T20:18:30.560 回答
1

试试看这是否有效

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

     });
于 2013-05-31T20:23:27.633 回答
1

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

$(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. 删除您在两个单击功能中的重复代码并将它们统一在一起。
于 2013-05-31T20:24:49.843 回答
1

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

绑定适用于 DOM 就绪。由于您的标签只有off类，因此不应用 on 并且 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;
});
于 2013-05-31T20:19:56.720 回答