Javascript 当用户单击容器外时提交输入组

我有一个输入范围广泛的表格。更改时，每个输入都通过ajax发送到后端。 然而，我也有一组输入来收集地址，如下所示

<div class="address">
    <input class="addrField" maxsize="100" name="street1" placeholder="street 1" size="40" type="text">
    <input class="addrField" maxsize="100" name="street2" placeholder="street 2" size="40" type="text">
    <input class="addrField" maxsize="100" name="city" placeholder="city" size="40" type="text">
    <input class="addrField" maxsize="100" name="postcode" placeholder="postcode" size="40" type="text">
    <input class="addrField" maxsize="100" name="country" placeholder="country" size="40" type="text">
</div>

但是，每次用户更改输入字段时都会触发更改事件，因此我会收到许多对后端的调用，而不是一个

当用户从包含的div中单击时，是否有方法仅调用submitInput

供参考，提交内容如下：

function submitInput(group) {
    $.ajax({
      type: 'post',
      url: '/urladdress',
      data: group.serializeArray()
    });
};

---

注意。在文档上放置单击事件是有问题的，因为它效率低下，但也因为它在文档之外的每次单击都会提交表单。出于我的目的，当他们更改表单后，表单应提交一次，然后单击页面的另一部分（但不是另一个地址字段）。

根据您的要求，您希望仅在用户单击容器分区之外时触发submitInput事件。以下代码可帮助您：

$(document).mouseup(function (e)
{
var container = $(".address");

if (!$("a").is(e.target) // if the target of the click isn't a link ...
    && !container.is(e.target) // ... or the container ...
    && container.has(e.target).length === 0) // ... or a descendant of the container
{
     var $inputs = $(this).children('input');
     submitInput($inputs);
}
});

---

将onclick事件绑定到

容器

。筛选来自

表单容器

和

输入

元素的事件。从外部容器获取事件时提交表单

函数提交（）{
警惕（“提交”）；
}
$（“#视口”）。单击（函数（事件）{
if（event.target.id！=“表单容器”&&event.target.nodeName！=“输入”）{
提交（）；
}
})

#容器{
填充：10px；
背景颜色：蓝色；
}
#模板容器{
利润率：10px；
填充：10px；
背景色：红色；
}
输入{
利润率：10px；
}
#视区{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.5）；
}

您可以尝试在

输入

上使用

模糊

事件，一旦

输入

失去焦点，该事件就会触发。非常感谢您的输入，我同意这会起作用，但在整个文档中添加鼠标移动功能似乎效率低下。这很好，但您必须单击周围的容器。我希望能够单击包含div之外的任何位置。该页面有许多表单元素，理想情况下，当用户从包含div中单击到页面的任何其他部分时，输入会提交一次。您可以将此函数与您想要的任何更高元素的

onclick

绑定。。。。在

视口

中的任何元素内的任何单击都将被激活，输入除外。

$(document).mouseup(function (e)
{
var container = $(".address");

if (!$("a").is(e.target) // if the target of the click isn't a link ...
    && !container.is(e.target) // ... or the container ...
    && container.has(e.target).length === 0) // ... or a descendant of the container
{
     var $inputs = $(this).children('input');
     submitInput($inputs);
}
});