Question

我的页面上有很多表格是动态添加的，我有一个按钮，我想触发重置页面上的所有表格，除了一个。

动态添加表单的示例是：

<form>
        <label for="code">Question code:</label>
        <input type="text" id="code" name="code" maxlength="25" class="used"/>

        <div class="clear"></div>

        <label for="title">Question:</label>
        <input type="text" name="titl" name="title" maxlength="255" class="used"/>

        <div class="clear"></div>

        <label for="hint">Hint:</label>
        <input type="text"id="hint" name="hint" class="used"/>

        <div class="clear"></div>   

        <input type="hidden" name="type" value="tapper" class="used">
        <input type="hidden" name="optionsType" value="none" class="used">
        <input type="reset" value="Cancel" class="delete-button">
        <input type="button" value="Add" class="action-button" onclick="pushQuestion(this);">
    </form>

此外，在动态添加每个表单后，我调用：

$('form').on('submit', function (e) {e.preventDefault()});

现在，当我想重置表单时，我会调用以下内容：

$('form').trigger('reset');

当进入控制台时，我得到一个包含所有DOM表单的数组。某些表单会重置，但其他表单不受影响。没有报告错误。有没有人想过为什么有些人会被重置而其他人没有？

编辑感谢您的帮助，但问题已得到解决。请参阅以下评论中的问题

Answer 1

经过几个小时的修修补补后，人们发现这个问题是表格被克隆的结果。

我正在对现有表单进行深度克隆，这会形成一种奇怪的表单状态，这意味着当.trigger('reset')被“触发”时，它会将表单重置为克隆的默认状态，这可能是或者可能没有包含一些原始数据，导致重置似乎没有做任何事情。

解决方法是首先使用.attr(value,'')在所有输入上触发循环，以在克隆后清除属性值。然后.trigger('reset')按预期运行。

Answer 2

我注意到各种浏览器之间的表单处理存在一些不一致之处。一个问题是，符合标准的浏览器需要输入或按钮 type = submit 才能正常运行。我知道这种情况至少是通过在任何文本字段中按回车键提交表单。

也许尝试添加＆lt; input type ='submit'/＆gt; ？

jQuery触发器重置仅重置某些表单

2 个答案: