j查询目标，并在用户离开指定目标时单击绑定

Question

我正在努力创建一个可以从网格布局编辑的表格。

目标： 如果用户双击可编辑的行/列，则可以操作input。然后，当他们在此对象外部单击时，它将触发一个$.ajax事件，保存他们的更改。

我这里有一个问题的工作示例：http://jsfiddle.net/Q3enw/5/你会看到，虽然它确实可以编辑，但只要你点击任何位置，它就会说你已经在容器外部点击了。

j查询代码：

$(".canEdit").dblclick(function () {
   $(this).find("input").attr("readonly", false).css("background", "white");
   var container = $(this); //set area to see when clicked outside
   $(document).click(function (e) {
     if (!container.is(e.target)) {
       alert("clicked outside container");
       //handle ajax submission since they left
      } else {
       console.log("still inside container");
       //do nothing, allow them to continue editing
      }
   });
});

问题：是否有更好的方法来了解用户何时在先前双击的区域之外单击？我认为绑定e.stopPropogation();就足够了，但它不会停止该功能足够长的时间以双击新行。也许我不应该使用$(document).click因为这会将文档绑定到该单个事件？

如果需要更多信息，请告诉我。提前感谢！

Answer 1

使用if (container.find(e.target).length<=0) // which will check whether container contains clicked element.

而不是

if (!container.is(e.target)) //which will check container (i.e., td in your case) is equal to e.target which will be input/child elements.

试试这个：

$(".canEdit").dblclick(function () {
    $(this).find("input").attr("readonly",false).css("background","white");
    var container = $(this); //set area to see when clicked outside
    $(document).click(function (e) {
        if (container.find(e.target).length<=0) {
            alert("clicked outside container");
            //handle ajax submission since they left
        } else {
            console.log("still inside container");
            //do nothing, allow them to continue editing
        }
    });
});

演示

Answer 2

你能改用模糊功能吗？ 像这样：

$(".canEdit").dblclick(function () {
    $(this).find("input").attr("readonly",false).css("background","white")
    .blur(function () {
        alert(1);
    });
}); 

小提琴

您也可以分离 css 并使用addClass()

$(".canEdit").dblclick(function () {
    $(this)
    .find("input")
    .attr("readonly",false)
    .addClass('editable')
    .blur(function () {
        alert(1);
    });
});

小提琴