onblur 事件可以与 Jeditable 和 jQuery UI 可排序一起使用吗？

Question

我正在使用jQuery UI sortable interaction 和Jeditable。这个想法是用户可以重新排序元素并影响这些元素的内容。我遇到的是，我有 Jeditable 设置来监听的 onblur event 正在被 jQuery 可排序监听器吞噬。

用户可以单击 Jeditable 元素，该元素变为可编辑，但当他们单击可排序的 li 时，将忽略 onblur 事件。如果他们在li 之外单击，则不会忽略该事件。当 Jeditable 在 li 内单击时，如何让 Jeditable 知道模糊事件？

这是jsFiddle illustrating the problem

HTML 标记

<ul class="elementlist">
    <li id="elementSk_10">
        <span class="editable-element" id="10">TEXT!</span>
    </li>
    <li id="elementSk_33">
        <span class="editable-element" id="33">Some text</span>
    </li>
</ul>

可编辑

$('.editable-element').editable('http://jsfiddle.net/echo/jsonp/', {
    onblur: 'submit',
    width: 250,
    indicator: 'Saving...'
});

jQuery UI 可排序

$(".elementlist").sortable({
    update: function(event, ui) {
        var elementSerialized = $(this).sortable('serialize');
        $.post('http://jsfiddle.net/echo/jsonp/', {
            elementSk: $(this).sortable('serialize')
        });
    }
});​

---

编辑： 为了澄清发生了什么，让我一步一步地进行演练并附上屏幕截图。

1. 点击Some Text
2. 点击包含TEXT!的li
3. 释放点击TEXT!

此时我还没有重新订购任何东西。单击li 并释放并没有触发Jeditable 的onblur。我想要点击离开来触发 onblur 的简单动作。如果我不连接可排序，这就是它的工作原理。我不得不相信 li 的点击被 sortable 吞噬了。

---

这是另一个重新排序但仍然没有 onblur 的示例。

1. 点击Some Text
2. 点击包含TEXT!的li
3. 将TEXT!移动到Some Text下方
4. 释放对TEXT! 的保留

重新排序元素并释放包含TEXT! 的li 后，onblur 不会被捕获。元素处于新顺序，但 Some Text 仍处于可编辑状态。

这里所说的一切都是我期望发生的：
单击当前正在编辑的字段之外的任何内容都会导致 Jeditable 的 onblur 触发。如果没有连接 jQuery 可排序，这正是发生的情况。当连接 jQuery 可排序以导致 onblur 行为时，我必须在可排序列表元素之外单击。

Answer 1

挖掘Jeditable source code 以对其进行修改。在阅读中遇到了一些未记录的事件钩子，这些钩子让一切变得不同：

var onedit   = settings.onedit   || function() { }; 
var onsubmit = settings.onsubmit || function() { };
var onreset  = settings.onreset  || function() { };

利用这些我可以禁用然后重新启用可排序：

var disableSortable = function(settings, self) {
    $(".elementlist").sortable('disable');
};

var enableSortable = function(settings, self) {
    $(".elementlist").sortable('enable');
};

$('.editable-element').editable('http://jsfiddle.net/echo/jsonp/', {
    onblur: 'submit',
    width: 250,
    indicator: 'Saving...',
    onedit: disableSortable,
    onsubmit: enableSortable,
    onreset: enableSortable
});

$(".elementlist").sortable({
    update: function(event, ui) {
        var elementSerialized = $(this).sortable('serialize');
        $.post('http://jsfiddle.net/echo/jsonp/', {
            elementSk: $(this).sortable('serialize')
        });
    }
});​

当用户按下 ESC 时，我必须在重置和提交时重新启用；这会重置表单而不是提交表单。这是jsFiddle showing a working implementation of disabling the sortables and then reenabling them。

我不喜欢这个解决方案，但它现在已经足够好了。我不希望onblur 被可排序的jQuery UI 吞没。但要解决这个问题，需要比我现在想做的更多的代码探索。

Answer 2

这并不意味着是一个明确的答案，我也不想在这里“接受”......只是评论的文字太多。

我相信你的第一个猜测是正确的——事件正在被吞噬。如果您查看sortable API，您会发现它扩展了onblur，将事件细分为一系列更精细的事件，这些事件可以有自己的回调。如果深入研究该代码表明原始事件不会被 sortable 自己的事件处理程序逻辑中的 preventDefault 或 returnFalse 这样简单的东西阻止冒泡，我一点也不会感到惊讶。

或者，当您拖动可排序元素时，您可能正在拖动某种克隆，即不携带任何实际事件处理程序的 LI 的可视副本。 这只是一个想法……再说一次，评论空间太有限了。

现在似乎也无法加载小提琴，所以我无法证明任何概念，但我想知道您是否可以直接干预 sortable 处理程序以故意导致元素模糊？或者更好的是，找出哪个 jEditable 函数在模糊时触发，并绕过模糊在排序函数结束时触发该函数。