Question

您好！我使用x-editable selector: '.editable'选项，以便在点击它们时自动编辑元素，并且一切正常，直到.editable元素中没有内部元素（例如，当我想使用时）他们wysihtml5）

如果你以某种方式点击父（.editable）（在它的右侧）元素就可以了，但如果我点击子（它上面没有editable类），问题发生：x-editable将editable editable-click类添加到子级并开始编辑为文本字段。

所以问题是，是否可以通过适当调整x-editable来处理，或者唯一的方法是使用点击事件进行解决方法甚至为x-editable创建补丁？你会推荐什么？

Answer 1

为了迎合动态元素，我建议将一个单击处理程序附加到父元素，然后调用x-editable小部件。我的工作示例附加了一个委托的单击处理程序，用于检查正在初始化的窗口小部件，如果没有，则附加窗口小部件并调用它来显示。如果它已经在元素上初始化，它将直接转到元素的下一个单击处理程序，该处理程序将由x-editable小部件处理。

此解决方案将使用“可编辑”类处理任何新元素和现有元素。

$('body').on('click', '.editable', function(event, ui){

    // Check for existing widget instance
    if(!$(this).data('editable')){

        // Setup the widget and show it
        $(this).editable({mode: 'inline'}).show();

    }

    // Fall-through for next event handler

});

使用JSFiddle：http://jsfiddle.net/54gcb6g4/1/

至于选择器选项，我已经阅读了插件的源代码，它实际上与我的解决方案类似（意味着我在正确的轨道上！）。有关v1.5.1的initLive，请参阅第1601行。他似乎正在使用e.target作为目标，而我的代码则使用this。在我的代码中更改它会复制问题。它似乎是在发起click的元素上调用它，而不是通过DOM冒泡消耗了事件处理程序的元素。可能是一个值得提交的错误。

使用＆＃39;选择器＆＃39;选项

1 个答案: