Question

我正在使用jEditable插件。我的问题是如何检测用户何时点击jEditable外部文本字段？

当用户在jEditable文本字段外单击时，仍然光标停留在文本字段中并且没有任何反应？

修改
我的jEditable表单看起来像

<span class="edit">
    <form>
        <input/>
    </form>
</span>

这是我目前的代码

$(".edit").editable("path/to/url", {
    indicator : "saving...",
    type   : 'text',
    event  : 'custom_event',
    submitdata : function(value, settings) {
        return {
            _method   : "post",
            myId    : jQuery("#id").val(), //extra needed id
        };
    },
    select : true,
    onblur : 'submit',
});

当我按{tab key}然后它提交文本字段的内容时，

'onblur'正在工作。但是当我在文本字段外单击鼠标时，没有任何反应，文本字段保持不变。

当用户在该文本字段外点击时，我还想提交文本字段的内容。

Answer 1

我刚刚找到了解决问题的工作方案，可能会帮助其他人......

$(document).mouseup(function (e) {
    var container = $(".edit");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if(container.find("form").length > 0) {
            container.find("form").submit();
        }
    }
});

我从SO Answer之一找到了这个答案。所以，如果有兴趣的人请看看给出的链接。

Answer 2

问题是事件：attr你设置“custom_event”它需要一些js事件，如点击等，这就是为什么onblur不工作.. 这是工作解决方案--- Fiddle Demo

$(".edit").editable("path/to/url", {
 indicator : "saving...",
 type   : 'text',
 event  : 'click',
 submitdata :  function  (value, settings) {
      return {
       _method   : "post",
       myId    : jQuery("#id").val(), //extra needed id
    };  } ,
 select : true,
 submit: "Submit",
 onblur : function() {           
   $(".edit").find("form").submit();
  }                  
});

Answer 3

尝试focusout事件而不是blur。

参考：http://api.jquery.com/focusout/

当用户在窗体外单击鼠标时，如何更新jEditable文本字段？

3 个答案: