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

您将一堆事件处理程序绑定到.moveLi但在编辑应该停止时从不删除它们：

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

用以下内容补充这些：

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

Answer 2

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

应为$(".moveLi").click(function() {...})

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

检查按钮是否有效

2 个答案: