解决方法
input元素有一个change事件,当表单字段更改时会触发该事件.所以你可以使用
event-delegating form of
on
:
$('selector_for_your_form').on('change','input[type=file]',function() { var form = $(this).closest('form'); form.append(/* ... markup for the new field ... */); });
change事件实际上是连接到表单,但只有当事件通过与选择器输入[type = file]匹配的元素时才触发处理程序. (jQuery确保更改事件传播,即使在默认情况下也不会传播.)
实例:(我假设您的标记会更有趣 – 当然看起来更好看 – 而不是在那里显示)
jQuery(function($) { $('form').on('change',function() { var form = $(this).closest('form'); form.append('<input type="file">'); }); });
body { font-family: sans-serif; } p { margin: 0px; }
<form> <input type='file'> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
笔记:
>如果你需要支持过时的jQuery版本,你可以使用delegate
,它就像on的委托形式,但参数的顺序不同.
>如果你需要支持过时的浏览器和过时版本的jQuery,那么更改事件可能不会冒泡,而旧的jQuery也没有让它成为委托的泡沫(即使直接挂钩时也是如此).
在任何一种情况下,请参阅2011 version of this answer(对JSBin链接稍作更改)以获取示例等.