jQuery on('focusout') 不会触发答案

【问题标题】：jQuery on('focusout') wont triggerjQuery on('focusout') 不会触发
【发布时间】：2020-03-12 20:24:30
【问题描述】：

我正在尝试在编辑输入字段时设置自动保存。我知道它可以让数据库在每个键上执行一个保存例程，所以我想我会在我的特定表单输入之外触发它。但是，它不会触发任何东西。

我的 jQuery：

$('form#base_fields input').on('focusout', function(event) {

    alert('test');

});

我只是将我的 var 创建和对我的 ajax 保存例程的调用替换为用于测试目的的警报，但它不会被触发。这是我的表格：

<form method="POST" id="base_fields" enctype="multipart/form-data">
    <input name="formname" type="hidden" value="base_fields_article">
    <input name="formtable" type="hidden" value="tnt_treeview">
    <input name="nodeid" type="hidden" value="1005">
    <label for="articlenumber">article number</label>
    <div class="form-content">
        <input name="articlenumber" type="text" value="ART000001" class="form-control" required="" placeholder="articlenumber" tabindex="1">
    </div>
    <label for="articlename">article name</label>
    <div class="input-group">
        <input name="articlename" type="text" value="Random article number 1" class="form-control" required="" placeholder="articlename" tabindex="2">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" aria-expanded="false"><span class="fa fa-globe font-size-20"></span></button>
        </div>
    </div>
    <label for="shortdescription">Short description</label>
    <div class="input-group">
        <input name="shortdescription" type="text" value="Random article with some specifications number 1" class="form-control" placeholder="shortdescription" tabindex="3">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" aria-expanded="false"><span class="fa fa-globe font-size-20"></span></button>
        </div>
    </div>
    <label for="longdescription">Long description</label>
    <div class="input-group">
        <input name="longdescription" type="text" value="Random article complete marketing text. Can go up to a lot of items" class="form-control" placeholder="longdescription" tabindex="4">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" aria-expanded="false"><span class="fa fa-globe font-size-20"></span></button>
        </div>
    </div>
    <label for="EAN">EAN-13</label>
    <div class="form-content">
        <input name="EAN" type="text" min="13" max="13" class="form-control" placeholder="EAN" tabindex="5">
    </div>
</form>

我不确定 focusout 是否像我认为的那样工作，有人可以将我推向正确的方向吗？

编辑：jsfiddle 这里：http://jsfiddle.net/09j3s28h/

【问题讨论】：

这可能会有所帮助，虽然也有一些 jQuery 插件：stackoverflow.com/questions/29621214/…
您代码中的警报对我有用。您是否在表单上应用了另一个插件以重新生成元素（如所见即所得的编辑器）？
Per jQuery docs focusout 意味着点击远离输入，而不是将鼠标从表单上移开。 api.jquery.com/focusout。有些人将此视为定时自动保存，也许您想在有人完全离开文档时自动保存？
@NathanielFlick 这是一个错字，我的意思是输入。因此我的 jquery 在输入上有它的目标。
@AliSheikhpour 没有所见即所得的编辑器实际上甚至在我的 JS 中链接。我确实有 JStree 在旁边运行，但我怀疑这会是一个问题。它不是那种形式。

标签： jquery

【解决方案1】：

经过一番吐槽后，我结合了一些遮阳篷来进行以下操作

$(document).on('focusout','#base_fields input',function(){

    console.log('test');

});

出于测试目的的警报，它完全让我陷入了无限循环，但通过 document.on 调用它，然后使用 focusout 和输入的 id 作为指导，它成功了。

参考：

jQuery Focusout of input not working

jQuery blur keeps firing when two inputs are involved

【讨论】：