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

Question

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

用户可以单击Jeditable元素，该元素变得可编辑，但当他们点击可排序的li时，如果他们点击，则会忽略onblur事件。如果他们在li之外点击，则不会忽略该事件。如何在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>

Jeditable

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

jQuery UI Sortable

$(".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. 点击包含li
的 TEXT!
3. 发布点击TEXT!



此时我没有重新订购任何东西。单击li并释放未触发Jeditable的onblur。我想点击一下即可触发onb​​lur。如果我没有连线可分类，这是它的工作原理。我必须以某种方式相信li上的点击被可排序的数据吞没。

---

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

1. 点击Some Text
2. 点击包含li
的 TEXT!
3. 将TEXT!移至Some Text
下方
4. 释放TEXT!



重新排序元素并释放包含li的{​​{1}}后，TEXT!未被捕获。元素采用新的顺序，但onblur仍处于可编辑状态。

这里所说的都是我期望发生的事情：
单击当前正在编辑的字段之外的任何内容都应该导致Jeditable的Some Text触发。如果没有连接jQuery sortable，那么这恰恰是怎么回事。当jQuery sortable连线导致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上展开，将事件细分为一系列更细粒度的事件，这些事件可以有自己的回调。我不会感到惊讶的是，如果挖掘代码显示原始事件被排除在可排序的自己的事件处理程序逻辑中可能像preventDefault或returnFalse那样简单的事情。

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

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