jquery 数据属性随机工作

Question

我有一个在鼠标移出时调用的函数。它检查元素现在是否被“拖动”或正在编辑。如果不是，它应该删除事件状态。

这就是它的样子。

function onMouseOut() {
        console.log("mouse out");
        if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
                console.log("no edit, no dragging");
                removeActive($(this).find(".content"));
        } else {
                console.log("edit: " + $(this).find(".content").attr("data-editing"));
                console.log("dragging: " + $(this).find(".content").attr("data-draging"));
        }
}

该元素位于可排序的内部。它不会破坏上面的代码，我可以根据需要对它进行多次排序。但是当我添加“connectWith”并移动发件人时，它完全崩溃了。

然后我到控制台的输出如下:

mouse out
edit: undefined
dragging: undefined

现在，这怎么可能？

编辑:

好的，这是标记:

<div id="body">
    <section class="main_1 grid_8 field" data-field='main_1'>
        <div class='module'>
        <div class="content content-editor" data-id='1' data-module='content' contenteditable='true'>
            <h1>Heading 1</h1><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
        </div>
            <div class='module'>
        <div class="content content-editor" data-id='4' data-module='content' contenteditable='true'>
            <h4>Yet another content</h4><p>This is yet another contentblock!</p>
        </div>
        </div>
    </section>
    <aside class="aside_1 grid_4 field" data-field='aside_1'>
        <div class='module'>
        <div class="content content-editor" data-id='2' data-module='content' contenteditable='true'>
            <h2>Aside Content</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        </div>
    </aside>
    <div class="x-clear"></div>
</div>

这是 js:

    $(document).ready(function() {
    /*
    * - on hoover, we display the panel
    */
    $( ".content-editor" ).mouseenter(onMouseIn);
    $( ".edit-wrap" ).live("mouseleave", onMouseOut);

    /*
    * - on click/focus, we set it as active
    */
    $( ".content-editor" ).focus(onFocus);
    $( ".content-editor" ).blur(onLostFocus);
});


/*
* - functions
*/
function onMouseIn() {
    if ($(this).attr('data-active') != "true" && !dragging) {
        console.log("wasnt active: " + $(this).attr('data-active'));
        makeActive($(this));
    } else {
        console.log("was active: " + $(this).data('id') + " - act: " + $(this).attr('data-active'));
    }
}
function onMouseOut() {
    console.log("mouse out");
    if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
        console.log("no edit, no dragging");
        removeActive($(this).find(".content"));
    } else {
        console.log("edit: " + $(this).find(".content").attr("data-editing"));
        console.log("dragging: " + $(this).find(".content").attr("data-draging"));
    }
}
function onFocus() {
    $(this).attr('data-editing', 'true');
}
function onLostFocus() {
    console.log("lost focus: " + $(this).data('id'));
}
function makeActive($this) {
    $this.attr('data-active', "true");

    $this.wrap("<div class='edit-wrap'>");
    var $parent = $this.parent(".edit-wrap");

    $parent.prepend("<div class='edit-head'>&raquo; Content ( Quick Edit )</div>");
    $parent.append(editMenu);
}
function removeActive($this) {
    $this.parent(".edit-wrap").find(".edit-head").remove();
    $this.parent(".edit-wrap").find(".edit-menu").remove();

    $this.unwrap(".edit-wrap");
    $this.attr('data-active', "false");
}


/*
* - html
*/
var editMenu = "<div class='edit-menu'>"+
        "<a href='#' class='btn openEditor'>Öppna Editor</a>"+
        "<a href='#' class='btn quicksave'>Snabspara</a>"+
        "</div>";

和:

    var dragging = false;

$(document).ready(function() {
    /*
    $( ".edit-head" ).live("mouseover", function() {
        $(this).parent(".edit-wrap").draggable({
            handle: ".edit-head",
            revert: 'invalid'
        }); 
    });

    $( ".edit-wrap" ).live("dragstart", function() {
        $(this).find(".content").attr("data-dragging", "true");
    });
    $( ".edit-wrap" ).live("dragstop", function() {
        $(this).find(".content").attr("data-dragging", "false");
        removeActive($(this).find(".content"));
    });
    */

    $( ".field" ).sortable({
        start: function(e, ui) {
            ui.placeholder.height(ui.item.height());
            $(this).find(".content").attr("data-dragging", "true");
            dragging = true;

            $(".field").addClass("target");

        },
        stop: function() {
            $(this).find(".content").attr("data-dragging", "false");
            dragging = false;

            $(".field").removeClass("target");
        },
        connectWith: '.field',
        placeholder: "drop-placeholder",
        dropOnEmpty: true,
        handle: ".edit-head",

        update: function(e, ui) {
            var $this   = ui.item;
            var $sender = ui.sender;

            if ($sender) {
                //vi bytte field
                console.log("bytte");
            } else {
                console.log("bytte inte");
            }
            console.log("change: " + $this + " from: " + $sender);
        }
    });
});

Answer 1

查找拼写错误:

attr("data-draging") 

以及代码中的其他位置

attr("data-dragging") 

但是如上所述，请使用:

data("dragging")