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。