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

jquery on click
jquery on multiple events
jquery on change
jquery on('load)
jquery on show
jquery on hover
jquery oncreate
jquery on multiple selectors

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


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

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

jQuery on() Method, The on() is an inbuilt method in jQuery which is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. jQuery's event system requires that a DOM element allow attaching data via a property on the element, so that events can be tracked and delivered. The object, embed, and applet elements cannot attach data, and therefore cannot have jQuery events bound to them.


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 () {

jQuery, Because you might have a dynamically generated elements (for example coming from an AJAX call), you might want to have the same click  The on() method attaches one or more event handlers for the selected elements and child elements. As of jQuery version 1.7, the on() method is the new replacement for the bind(), live() and delegate() methods. This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base.


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)

Why use jQuery on() instead of click(), The jQuery On – .on() attaches one or more event handlers to selected elements. You can use .on() to attach event handlers for both current  jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.


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

Multiple ways of using jQuery On Method, The on() method in jQuery is used to attach event handlers to elements.​SyntaxThe syntax is as follows −$(selector).on(event,childSelector,data  $.click() is merely a shortcut for either bind or on. From jQuery docs: In the first two variations, this method is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7. In the third variation, when .click() is called without arguments, it is a shortcut for .trigger("click").


jQuery on() with Examples, jQuery on: Main Tips. The jQuery .on() method adds event listeners to the selected element. The .off() function removes the event listeners  This page documents data types appearing in jQuery function signatures, whether defined by JavaScript itself or further restricted by jQuery. Unless explicitly stated otherwise, jQuery functions require primitive values where applicable, and do not accept their Object-wrapped forms. If you want to study these concepts in depth, take a look at MDN.


All About jQuery On Method: Tips and Examples of jQuery .on, which is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. jQuery Tutorial PDF Version Quick Guide Resources Job Search Discussion jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development.


Is jQuery dead?, . Angular helps you to maintain your code and also better with express. A jQuery plugin that adds cross-browser mouse wheel support. JavaScript 1,678 3,795 4 4 Updated on Sep 10, 2019. A development tool to help migrate away from APIs and features that have been or will be removed from jQuery core. JavaScript 395 1,606 7 0 Updated on Sep 8, 2019. jquery-wp-content. WordPress themes and plugins for the jQuery sites.