CODEWITHSUNDEEP
javascriptjquery
ayok
ayok

Reputation: 31

Trigger child only, not the parent

I have a hidden input file inside of a label, which I made as a browse button. On other place I have another button which can trigger the input file to browse files.

Here is the HTML: This is the input file

<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">

This is the trigger button

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

And this is the script, where I try to click on '.uploaded-file' without clicking the '.btn-u' label. This to change hidden field value to edit or add.

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

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

However, it keeps making the value for '.act' = 'add', because everytime I trigger the '.uploaded-file' click, it clicks also 'label.btn-u', so that the value of '.act' is always 'add'. So how can I only trigger the input file without clicking the wrapper?

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

It seems it works now if I do 

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

Upvotes: 0

Views: 59

Answers (2)

Daphoque
Daphoque

Reputation: 4678

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

// edit final declaration

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

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

Upvotes: 1

Govind Samrow
Govind Samrow

Reputation: 10179

Stop parent trigger with stopPropagation :

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

Upvotes: 0

Related Questions