Question

我在标签内部有一个隐藏的输入文件，我将其作为浏览按钮。在其他地方，我有另一个按钮，可以触发输入文件浏览文件。

这是HTML：这是输入文件

<label class="btn-u btn-u-green">
    <span class="fancy-label">Choose file</span>
    <input class="form-control hidden uploaded-file" name="upload" type="file">
</label>
<button type="button" class="btn-u btn-u-blue btn-u-upload hidden">
    Upload 
    <i class="fa fa-upload"></i>
</button>
<input name="act" class="act" type="hidden" value="add">

这是触发按钮

<button class="btn btn-success btn-xs btn-edit" type="button"><i class="fa fa-edit"></i></button>

这是脚本，我尝试点击'.uploaded-file'而不点击'.btn -u'标签。这可以更改隐藏的字段值以进行编辑或添加。

$('.btn-edit').click(function(){
    $('.act').val('edit');
    $('.uploaded-file').click();
    return false;
});

$('label.btn-u').click(function(){
    $('.act').val('add');
});

但是，它会继续为'.act'='add'创建值，因为每当我触发'.uploaded-file'点击时，它也会点击'label.btn -u'，以便' .act'总是'添加'。那么如何在不单击包装器的情况下触发输入文件呢？

=============================================== ===========================

如果我这样做，它似乎现在有用了

$('.uploaded-file', e).click(function(e){ e.stopPropagation();}).click();

Answer 1

 $('.uploaded-file').click(function(e){ e.stopPropagation();});

//编辑最终声明

  $('.btn-edit').click(function(){
        $('.act').val('edit');
        $('.uploaded-file').click();
        return false;
 });

 $('.uploaded-file').click(function(e){ e.stopPropagation() ;});

Answer 2

使用stopPropagation停止父触发器：

$('.uploaded-file').click(function(e){
    e.stopPropagation();
});

仅触发子节点，而不是父节点

2 个答案: