检查按钮是否处于活动状态。

Question

我真的在这段代码上挣扎。

我的目标是：我有一个“编辑按钮”。如果我按下它，它会变成活动状态，并且进入编辑模式。我可以即时编辑列表并自动更新。

问题：我只能让它工作50%。如果我尝试激活按钮，我可以编辑对象。但是当我再次取消激活按钮时，我仍然可以编辑对象。当然，这不应该是可能的。

这里是一些混乱的代码。是的，大部分都是在线找到的，我正在尝试自己编辑它...

$("#editButton").click(function() {
    $("#editButton").toggleClass("active");
    if ($("#editButton").hasClass("active")) {
        $(".moveLi").on("click", function() {
            var ID = $(this).attr('id');
            $("#move_"+ID).hide();
            $("#move_edit_"+ID).show();
        }).change(function() {
            var ID = $(this).attr('id');
            var first = $("#move_edit_"+ID).val();
            var dataString = 'id=' + ID + '&name=' + first;
            $("#move_"+ID).html('<p>Saving...</p>'); // Loading image

            if (first.length > 0) {
                $.ajax({
                    type: "POST",
                    url: "table_edit_ajax.php",
                    data: dataString,
                    cache: false,
                    success: function(html) {
                        $("#move_"+ID).html(first);
                    }
                });
            }
            else {
                alert('Enter something.');
            }
        });

        $(".editbox").mouseup(function()  {
            return false
        });

        $(document).mouseup(function() {
            $(".editbox").hide();
            $(".text").show();
        });
    } 
});

感谢您的提前帮助！

- 6olden

---

你的Tab键坏了吗？这个看起来很难读懂。 - Matt Ball

请学会正确格式化您的代码，这将使您更容易阅读代码，并让他人更方便地为您提供帮助。 - Rory McCrossan

请提供您的HTML代码。 - Pavel Strakhov

对不起，我的格式有点问题。在 Stack 上也遇到了格式问题，它的表现很奇怪。 - 6olden

好的...我做到了！我很忙，所以没时间在 JsFiddle 上上传它... 我做了什么：使用 bind+click.namespace 和 bind+change.namespace 并解除绑定... 谢谢！ - 6olden

Answer 1

您在 .moveLi 上绑定了很多事件处理程序，但在编辑停止时却没有将它们移除：

if ($("#editButton").hasClass("active")) {
    $(".moveLi").on("click", function() {
        ...
    }).change(function() {
        ...

可以通过类似以下方式来补充：

$(".moveLi").off("click").unbind('change');

- jbabey

---

好的，我尝试添加你的代码行。 “编辑模式”现在已禁用，但是现在我无法再单击<li>了。当您单击它们时，li会展开。如果我再次启用编辑模式按钮，则<li>仍然处于禁用状态。仍在尝试将其放在jsFiddle上…我已经添加了PHP，并且li是数据库中的条目。 - 6olden

我做到了。你的答案确实让我找对了方法。我使用了命名空间绑定和解绑。谢谢！ - 6olden

Answer 2

这行代码出错了 $(".moveLi").on("click", function()。

应该是 $(".moveLi").click(function() {...})

你也可以使用Firefox的Firebug插件进行调试，或者其他浏览器内置的开发者工具，这样你可以看到所有的JS（和CSS）错误。

- Bud Damyanov

---

你发布的那两行代码是相同的。 - LeeR

@budiony 不，它们肯定是同一件事（假设使用的是jQuery 1.7+版本）。 - jbabey

嗯，我们不能确定jQuery的版本...@6olden - 请提供更多信息或将您的代码发布到jsfiddle。 - Bud Damyanov

不是的...那些函数完全相同。$(selector).click(function() {}) 是 $(selected).on("click", function() {}) 的一种快捷方式。 - LeeR