Question

我有一个包含各种输入的表单。每次输入都会在更改时通过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时，以组的形式提交所有地址输入？

我尝试过使用更改事件，例如

$(".address").change(function() { 
    var $inputs = $(this).children('input');
    submitInput($inputs);
});

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

当用户点击包含div时，有没有办法只调用submitInput？

仅供参考，submitInput如下：

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

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

Answer 1

根据您的要求，您只有在用户单击容器div外部时才触发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);
}
});

Answer 2

将onclick事件绑定到container。过滤来自form-container和input元素的事件。从外部容器中获取事件时提交表单。

function submit(){
    alert("Submitting.");
}
$("#viewport").click(function(event){
    if(event.target.id !== "form-container" && event.target.nodeName !== "INPUT"){
        submit();
    }
})

#container{
    padding:10px;
    background-color:blue;
}
#form-container{
    margin:10px;
    padding:10px;
    background-color:red;
}
input{
    margin:10px;
}
#viewport{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
}

<div id="viewport">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="container">
        <div id="form-container">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </div>
</div>

用户点击容器时提交输入组

2 个答案: