JQuery on('click') does not work when clicked

Question

So I'm currently working on this project and I am stuck this problem. I tried looking at the console but it doesn't show anything when I clicked the button. What I'm trying to do is when I click the button, it will trigger the file input, but so far, when I clicked it, nothing happens, not even an error is shown.(The code is based on the answer in this question: Bootstrap form upload file layout) Can you guys help me find out what I did wrong

These are the codes

TabUploadDokumen.html

<script>
$(document).ready(function () {
    /* Some code here */
});

$('#btn_IdentitasKTP/Paspor').on('click', function () {
    $('#file_IdentitasKTP/Paspor').trigger('click')
});

$('#file_IdentitasKTP/Paspor').change(function () {
    var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
    $('#text_IdentitasKTP/Paspor').val(file_name);
});
</script>

<!--Some other code -->    
<div class='form-group'>
    <label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
    <div class='form-group'>
        <label for="text_IdentitasKTP/Paspor" id="lbl_IdentitasKTP/Paspor" class="control-label">Identitas(KTP/Paspor)</label>
    </div>
    <div class="input-group">
        <input type="file" id="file_IdentitasKTP/Paspor" name="name_file_IdentitasKTP/Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
        <input type="text" class="form-control" id="text_IdentitasKTP/Paspor" readonly />
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btn_IdentitasKTP/Paspor">Upload KTP/Paspor</button>
        </span>
    </div>`
</div>
<!-- Some other code -->

I'm using ASP.NET MVC 5 and Bootstrap version 3.00 and Jquery version jquery version 1.11.1 if it is any help.

Thanks in advance

@Alexander De Sousa Thank you for pointing that out, I add the double backslashes like what vhr said and moved it inside the ready function and it now works — melonsoda20, Sep 14 '18 at 08:10

score 3 · Accepted Answer · answered Sep 14 '18 at 08:06

3

Your selectors contain forward slashes that need to be escaped like this:

$("#btn_IdentitasKTP\\/Paspor'")

answered Sep 14 '18 at 08:06

vhr

1,528
1
13
21

Thank you, I just tried this and move it to the ready function like what @Alexander De Sousa said and it works now. Thank you for the answer – melonsoda20 Sep 14 '18 at 08:09

peeebeee · Answer 2 · 2018-09-14T08:27:09.027

0

The on('click') function needs to run in the $(document).ready function, otherwise it will run before the DOM is ready and won't find the element it's supposed to bind to.

$(document).ready(function () {
    $('#btn_IdentitasKTP\\/Paspor').on('click', function () {
    $('#file_IdentitasKTP\\/Paspor').trigger('click')
  });
});

(And escape the slashes as suggested in another answer)

edited Sep 14 '18 at 08:27

answered Sep 14 '18 at 08:06

peeebeee

2,541
6
21
26

score 0 · Answer 3 · answered Sep 14 '18 at 08:16

Ensure that your jQuery code is sat within your document.ready() function.

Escape the selectors that contain forward slashes (click here for more)

I would also replace

$('#btn_IdentitasKTP/Paspor').on('click', function () {

with

$('document').on('click','#btn_IdentitasKTP\\/Paspor', function () {

score 0 · Answer 4 · answered Sep 14 '18 at 08:27

it doesn't work because script tag is render before the html elements. it will work if you change the code as below,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Some other code -->
<div class='form-group'>
    <label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
    <div class='form-group'>
        <label for="text_IdentitasKTP_Paspor" id="lbl_IdentitasKTP_Paspor" class="control-label">Identitas(KTP/Paspor)</label>
    </div>
    <div class="input-group">
        <input type="file" id="file_IdentitasKTP_Paspor" name="name_file_IdentitasKTP_Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none"  />
        <input type="text" class="form-control" id="text_IdentitasKTP_Paspor" readonly />
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btn_IdentitasKTP_Paspor" >Upload KTP/Paspor</button>
        </span>
    </div>`
</div>

<script>
    $(document).ready(function () {
        /* Some code here */
    });

    $('#btn_IdentitasKTP_Paspor').on('click', function () {
        $("#file_IdentitasKTP_Paspor").click()
    });

    $('#file_IdentitasKTP_Paspor').change(function () {
        var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
        $('#text_IdentitasKTP_Paspor').val(file_name);
    });
</script>
<!-- Some other code -->

JQuery on('click') does not work when clicked

4 Answers4