单击时 JQuery on('click') 不起作用答案

【问题标题】：JQuery on('click') does not work when clicked单击时 JQuery on('click') 不起作用
【发布时间】：2019-02-19 00:04:48
【问题描述】：

所以我目前正在从事这个项目，但我遇到了这个问题。我尝试查看控制台，但单击按钮时它没有显示任何内容。我想要做的是当我点击按钮时，它会触发文件输入，但到目前为止，当我点击它时，什么也没发生，甚至没有显示错误。（代码基于this中的答案问题：Bootstrap form upload file layout) 你们能帮我找出我做错了什么

这些是代码

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

如果有帮助的话，我正在使用 ASP.NET MVC 5 和 Bootstrap 3.00 版和 Jquery 版 jquery 1.11.1 版。

提前致谢

【问题讨论】：

为什么你的 jQuery 代码在 ready 函数之外？
@Alexander De Sousa 感谢您指出这一点，我像 vhr 所说的那样添加了双反斜杠，并将其移到了 ready 函数中，现在它可以工作了

标签： javascript jquery html

【解决方案1】：

您的选择器包含需要像这样转义的正斜杠：

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

【讨论】：

谢谢，我刚刚尝试了这个并将其移动到准备好的功能，就像@Alexander De Sousa 所说的那样，它现在可以工作了。谢谢你的回答

【解决方案2】：

on('click') 函数需要在$(document).ready 函数中运行，否则它会在 DOM 准备好之前运行，并且找不到它应该绑定的元素。

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

（并按照另一个答案中的建议转义斜杠）

【讨论】：

【解决方案3】：

确保您的 jQuery 代码位于 document.ready() 函数中。

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

我也会替换

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

与

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

【讨论】：

【解决方案4】：

它不起作用，因为脚本标记在 html 元素之前呈现。如果您将代码更改如下，它将起作用，

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

【讨论】：