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

Question

我正在使用jQuery UI sortable交互和Jeditable。用户可以重新排序元素并影响这些元素的内容。我onblur event遇到的是jQuery可排序侦听器吞没了我要监听的Jeditable设置。

用户可以单击Jeditable元素，然后该元素变为可编辑状态，但是如果单击了li可排序元素，则单击该按钮时，onblur事件将被忽略。如果他们在外部单击，则不会忽略该事件li。当它们在内部单击时，如何使Jeditable知道模糊事件li？

这是一个说明问题的jsFiddle

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. 点击li包含TEXT!
3. 释放点击 TEXT!

目前，我还没有重新排序任何东西。单击li和释放并没有触发onblurfor Jeditable。我想要单击以触发onb​​lur的简单动作。如果我不连接可排序的文件，这就是它的工作方式。我必须相信，以某种方式可以将对的点击li吞下。

---

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

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

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

这就是我期望发生的所有事情：
单击当前正在编辑的字段之外的任何内容onblur，都将触发Jeditable。如果未将jQuery sortable连接起来，就会发生这种情况。当jQuery sortable连接起来导致onblur行为时，我必须在sortable list元素之外单击。

Answer 1

深入研究Jeditable 源代码并对其进行修改。在阅读中遇到了一些未记录的事件钩子，它们使一切变得不同：

\n\n

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

\n\n

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

\n\n

var disableSortable = function(settings, self) {\n    $(".elementlist").sortable(\'disable\');\n};\n\nvar enableSortable = function(settings, self) {\n    $(".elementlist").sortable(\'enable\');\n};\n\n$(\'.editable-element\').editable(\'http://jsfiddle.net/echo/jsonp/\', {\n    onblur: \'submit\',\n    width: 250,\n    indicator: \'Saving...\',\n    onedit: disableSortable,\n    onsubmit: enableSortable,\n    onreset: enableSortable\n});\n\n$(".elementlist").sortable({\n    update: function(event, ui) {\n        var elementSerialized = $(this).sortable(\'serialize\');\n        $.post(\'http://jsfiddle.net/echo/jsonp/\', {\n            elementSk: $(this).sortable(\'serialize\')\n        });\n    }\n});\xe2\x80\x8b\n

\n\n

当用户按下时，我必须重新启用重置和提交ESC；这会重置表单而不是提交表单。这里的jsFiddle 显示了禁用可排序然后重新启用它们的工作实现。

\n\n

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

\n