javascript - 单击按钮时不调用 Jquery

Question

我有一个用于文件选择的 jquery http://jsfiddle.net/parvathy/e8wr5/

请看 fiddle 。当我点击文本框时，那个 jquery 是有效的..但是当点击“浏览”按钮时它不起作用。我正在使用 boot strap css 作为按钮和输入文本，请帮助我..

 <input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">    
 <button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>


$(document).ready(function () {
$('#fake_section').click(function (e) {
    e.preventDefault();
    $('#file').trigger('click');
});

$('#file').change(function (e) {
    var filename = $(this).val();
    var ext = filename.split('.').pop().toLowerCase();
    if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
        alert('Only add Excel Files!');
    }
    else {
        $('input[name="fake_section"]').val(filename);
    }
});

});

Answer 1

因为你有 2 个 id 为 fake_section 的元素，所以请改用 class - 当你使用 id 选择器时，它会选择具有给定 id 的第一个元素

<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>

然后

$('.fake_section').click(function (e) {
    e.preventDefault();
    $('#file').trigger('click');
});

演示:Fiddle