Why does my JQuery click event won't work? [duplicate]

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
– jmargolisvt, Commented Sep 8, 2020 at 17:15
"neither gives any output" - no error, no "0" or "1"? No output at all? Then I would suggest the code isn't being called. — fdomn-m
– fdomn-m, Commented Sep 8, 2020 at 17:40
$("#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... — fdomn-m
– fdomn-m, Commented Sep 8, 2020 at 17:51
Try control-F5 or open the page with console open and debugger set to disable cache (see stackoverflow.com/a/7000899/2181514) — fdomn-m
– fdomn-m, Commented Sep 8, 2020 at 18:42
Glad you found the issue (code not running) and hope you can find the cause. — fdomn-m
– fdomn-m, Commented Sep 8, 2020 at 18:42

Brian Wiltshire · Accepted Answer · 2020-09-08 17:11:17Z

0

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

answered Sep 8, 2020 at 17:11

Brian Wiltshire

4574 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arahpanah Over a year ago

Tried this but it doesn't work.

Dharman · Accepted Answer · 2020-09-08 22:32:50Z

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 8, 2020 at 22:32

Dharman♦

33.9k27 gold badges103 silver badges153 bronze badges

answered Sep 8, 2020 at 18:50

arahpanah

3591 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

Why does my JQuery click event won't work? [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related