Why does my JQuery click event won't work?

Question

I'm trying to link this button with #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>

with this JQuery script

$(".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...");
});

When I press the #analyzebutton button, it should fire the on click function and executes the function, but it doesn't. It's

I also have linked the JQuery script and the JS script at bottom of the html file.

Somehow, #analyzebutton is the only that doesn't work. The .btn-ambilfoto button (located just above the #analyzebutton) works without problem.

I've tried to change the code to $(selector).on("click", function(){}) but it doesn't work either.

How should I fix this? I've spent more than 6 hours to just to fix this.

I was trying to suggest that your issue is that the you have that element hidden with `display: none`. — jmargolisvt, Sep 08 '20 at 17:15
Does your button get shown? If you add this inside the .btn-ambilfoto click handler, what does it give: `console.log($("#analyzebutton").length)` - what does it give if you add it right before `$("#analyzebutton").click(` ? — freedomn-m, Sep 08 '20 at 17:27
@freedomn-m The `#analyzebutton` gets shown after I click the `btn-ambilfoto` button. Tried adding that console log but neither gives me any output. — arahpanah, Sep 08 '20 at 17:35
*"neither gives any output"* - no error, no "0" or "1"? No output at all? Then I would suggest the code isn't being called. — freedomn-m, Sep 08 '20 at 17:40
@freedomn-m Nope. But if I run the console.log on browser console, it gives me "1". — arahpanah, Sep 08 '20 at 17:43
`$("#id").click` will only apply to elements that exist at the time the code runs (assuming the code runs), so trying to establish that the element exists at that time, which it appears it doesn't, or your code is simply not running. `$(document).on("click", "#analyzebutton", function() ..` would the code to use if it's created later ("dynamically created"). But if you're code isn't even running... — freedomn-m, Sep 08 '20 at 17:51
@freedomn-m Thanks very much for your help but I think I found the issues. I just opened the debugger on Chrome but somehow the JS script doesn't call `#analyzebutton` (just like what you said), it calls `#analyzingbutton` (this was the previous ID I used). This is very weird, if this is the case, why does it not run the latest saved script (I have saved it multiple times, I also pushed it to my github)? I just reopened Chrome, Firefox, and VS Code but somehow it still runs that old saves (not the latest one). It uses the latest html, css, but it doesn't use the latest js. Why? — arahpanah, Sep 08 '20 at 18:28
Try control-F5 or open the page with console open and debugger set to disable cache (see https://stackoverflow.com/a/7000899/2181514) — freedomn-m, Sep 08 '20 at 18:42
Glad you found the issue (code not running) and hope you can find the cause. — freedomn-m, Sep 08 '20 at 18:42
@freedomn-m Thanks very much! It works! The code runs now! Can't believe it's because of that thing. I have to try to use debugger more now (gotta admit, I forgot about debugging)! — arahpanah, Sep 08 '20 at 18:46

score 0 · Answer 1 · answered Sep 08 '20 at 17:11

Make sure your code is inside the document.ready function. That might be the problem.

$(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...");
    });
});

Tried this but it doesn't work. – arahpanah Sep 08 '20 at 17:37 — arahpanah, Sep 08 '20 at 17:37

score 0 · Accepted Answer · edited Sep 08 '20 at 22:32

0

The browser runs the previous saves (not the latest one) where it doesn't call #analyzebutton and calls another button instead. Thanks to @freedomn-m and this SOF answer, disabling the cache on the browser fixed the issue!

edited Sep 08 '20 at 22:32

Dharman

21,838
18
57
107

answered Sep 08 '20 at 18:50

arahpanah

105
1
7

Why does my JQuery click event won't work?

2 Answers2