为什么我的 JQuery 点击事件不起作用？ [复制]答案

【问题标题】：Why does my JQuery click event won't work? [duplicate]为什么我的 JQuery 点击事件不起作用？ [复制]
【发布时间】：2020-12-27 02:31:44
【问题描述】：

我正在尝试将此按钮与#analyzebutton id 链接

<div class="pd-upload-foto">
     <div class="vertical-center text-center">
          <button id="startbutton" class='btn btn-ambilfoto btn-sm btn-1 font-3' style='padding-top:.2rem; padding-bottom:.2rem;' type='button'>ambil foto</button>
           <button id="analyzebutton" class='btn btn-sm btn-1 font-3' style='padding-top:.2rem; padding-bottom:.2rem; display: none;' type='button'>mulai analisis</button>
      </div>
</div>

<div class="pd-analisa" style="display: none;">
                <div class="vertical-center text-center">
                    <button id="analyzingbutton" class='btn btn-sm btn-1 font-3' style='padding-top:.2rem; padding-bottom:.2rem;' type='button'>mulai analisa</button>
                    <img id="tesfotomasuk" src="" alt="tes aja">
                </div>
 </div>

使用这个 JQuery 脚本

$(".btn-ambilfoto").click(function() {
     $(".btn-ambilfoto").html("berhasil").attr("disabled", "true");
     $(".btn-ambilfoto").removeClass("btn-1").addClass("btn-4");
     $("#analyzebutton").show();
});

$("#analyzebutton").click(function() {
     $(".pd-upload-foto").hide();
     $(".pd-analisa").show();

     $("#analyzingbutton").html("Analyzing...");
});

当我按下#analyzebutton 按钮时，它应该触发点击功能并执行该功能，但它没有。这是

我还在html文件的底部链接了JQuery脚本和JS脚本。

不知何故，#analyzebutton 是唯一不起作用的。 .btn-ambilfoto 按钮（位于 #analyzebutton 上方）可以正常工作。

我尝试将代码更改为$(selector).on("click", function(){})，但它也不起作用。

我应该如何解决这个问题？我花了 6 个多小时来解决这个问题。

【问题讨论】：

我试图建议您的问题是您使用 display: none 隐藏了该元素。
“都不给出任何输出” - 没有错误，没有“0”或“1”？完全没有输出？然后我会建议代码没有被调用。
$("#id").click 将仅适用于代码运行时存在的元素（假设代码运行），因此尝试确定该元素当时存在，但它似乎并不存在，或者您的代码根本没有运行。 $(document).on("click", "#analyzebutton", function() .. 将在以后创建（“动态创建”）时使用的代码。但是如果你的代码甚至没有运行......
尝试 control-F5 或打开控制台打开页面并将调试器设置为禁用缓存（请参阅stackoverflow.com/a/7000899/2181514）
很高兴您发现了问题（代码未运行），希望您能找到原因。

标签： javascript jquery

【解决方案1】：

确保您的代码位于 document.ready 函数中。这可能是问题所在。

$(document).ready(function(e) {
    $(".btn-ambilfoto").click(function() {
        $(".btn-ambilfoto").html("berhasil").attr("disabled", "true");
        $(".btn-ambilfoto").removeClass("btn-upself-1").addClass("btn-upself-4");
        $("#analyzebutton").show();
    });
    
    $("#analyzebutton").click(function() {
        $(".pd-upload-foto").hide();
        $(".pd-analisa").show();
    
        $("#analyzingbutton").html("Analyzing...");
    });
});

【讨论】：

试过了，但是没用。

【解决方案2】：

浏览器运行以前的保存（不是最新的），它不调用#analyzebutton，而是调用另一个按钮。感谢@freedomn-m 和this SOF answer，在浏览器上禁用缓存解决了这个问题！

【讨论】：