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

Question

我正在使用jQuery UI sortable interaction和 Jeditable 。这个想法是用户可以重新排序元素并影响这些元素的内容。我遇到的是，我有 Jeditable 设置来监听的 onblur 事件 被 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. 点击一些文本
2. 点击包含 TEXT! 的li
3. 松开文本!

目前我还没有重新订购任何东西。单击 li 并释放并未触发 Jeditable 的 onblur。我想要简单的点击 Action 来触发onb​​lur。如果我不连接可排序，这就是它的工作原理。我不得不相信 li 上的点击不知何故被排序吞噬了。

<小时/>

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

1. 点击一些文本
2. 点击包含 TEXT! 的li
3. 将TEXT!移动到Some Text下方
4. 释放TEXT!

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

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

Answer 1

深入了解Jeditable source code并有意修改它。在阅读中遇到了一些未记录的事件 Hook ，这些 Hook 使一切变得不同:

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 可排序吞没。不过，要解决这个问题，需要比我现在想做的更多的代码探索。