jQuery - 单击文件输入的父级并触发单击事件到文件输入后，它返回“太多的递归”

Posted 2021-04-11

我在我的jQuery中有这个：

$(document).on('click', '.upload-wrap', function(event)
{
    $('[name="uploads[]"]').trigger('click');
});

但它返回'太多的递归'错误！但它不适合我的其他元素，如：

$(document).on('click', '.upload-image-wrap', function(event)
{
    $(this).next('[name="image"]').trigger('click');

});

我用setTimeout来解决这个问题：

$(document).on('click', '.upload-wrap', function(event)
{
    setTimeout(function() {
        $('[name="uploads[]"]').trigger('click');
    }, 0);
});

但是现在firefox显示页面顶部'Firefox阻止该网站打开99999999弹出窗口'，其中99999999增加了几毫秒。

我该如何解决？

谢谢

答案

如果.upload-image-wrap具有'[name="uploads[]"]'属性，则可以使用not()将'[name="uploads[]"]'排除在触发委托事件之外：

$(document).on('click', '.upload-wrap:not([name="uploads[]"])', () => {
  $('[name="uploads[]"]').trigger('click');
});

另一种选择是检查事件是否由人类触发：

$(document).on('click', '.upload-wrap', (e) => {
  if (e.originalEvent !== undefined) $('[name="uploads[]"]').trigger('click');
});