jQuery.trigger('click') 在我的代码中不起作用

Question

当用户单击<input id="J_upload_btn" type="button" />按钮时，我希望弹出文件资源管理器供用户选择文件。

然而，上面的源代码只在 Firefox 4 上运行良好。在 Chrome 11/12 和 Firefox 3 上，选择文件框只有在你点击按钮几次后才会弹出。 我的 jQuery 版本是 1.5.2。

$('#J_upload_btn').click(function() {
    var _id = new Date().getTime(),
        _$form = $('#J_pic_form'),
        _$input = $('<input id="' + _id + '"' +
                  ' type="file" name="file" class="hide_input">');
    _$form.append(_$input);
    _$input.trigger('click');
    }
});

Answer 1

• 无与伦比的右花括号。 只需将其删除即可。
• 在创建 DOM 树之前，您无法可靠地访问 DOM 元素。 如果此代码未包装在 function 中并在此之后调用，则只需将其包装在$(function(){ /* code */ }); jQuery 在 DOM 准备好后立即调用它就足够了。
• 在某些浏览器（包括 Firefox 3）中， 出于安全原因，限制在<input type="file">元素上触发点击事件。

这段代码在 Chrome 中适用于我：

$(function() {
    $('#J_upload_btn').click(function() {
        var _id = new Date().getTime(),
            _$form = $('#J_pic_form'),
            _$input = $('<input id="' + _id + '"' +
                        ' type="file" name="file" class="hide_input">');
        _$form.append(_$input);
        _$input.trigger('click');
    });
});

Answer 2

由于安全问题，这种输入比其他输入更受限制。 当然有一个更新的方法，但最常见的方法是使用不可见的输入（不透明度为 0，不显示：无），并在其上放置一个假按钮，所以当你点击假按钮时，你'重新点击不可见的输入。

Answer 3

您可能想尝试不将输入包装为 jayesh object。 如果您将 HTML 字符串传递给 append，那么浏览器也应该添加一个新的输入字段。

var input = "<input id='"+id+"' />";
_$form.append(input);

此外，您是否尝试过在控制台中调试单击以确保它被触发或后续代码有问题？

Answer 4

如果您点击输入，function 预计会运行。 但是据我所见，您还没有为_$input的点击事件写任何function。