javascript - 检查按钮是否激活

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

提前致谢!

Answer 1

您将一堆事件处理程序绑定(bind)到 .moveLi 但在应该停止编辑时永远不会删除它们:

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

用这样的东西补充这些:

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