1

I know my question has been asked many times but when trying the most common solution that I've seen from multiple stackoverflow answers, I couldn't get it to work. As an example: Why is this jQuery click function not working?. Perhaps I'm missing something fundamental?

Can someone explain why given the following html,

<button id="test1">Create</button>

The following javascript does not fire the button click, option1

$(document).ready(function(){
    $("#test1").click(function(){
      console.log("TEST1");
    });
  });

but the javascript below does? option2

$(document).on("click","#test1",function(){
    console.log("TEST123")
  })

If anything I thought option1 would work because it waits for the document to be ready, but instead option1 doesn't and option2 does. Why is that the case? Thank you.

Mark
  • 3,138
  • 5
  • 19
  • 36
  • 1
    It should work. You only need the second version if you're adding the button dynamically after the document is loaded. – Barmar Oct 26 '20 at 20:27
  • When you say dynamically do you mean base on a condition for the button to appear? – Mark Oct 26 '20 at 20:29
  • I mean using JavaScript to add the button to DOM, rather than having it statically in the HTML. – Barmar Oct 26 '20 at 20:29
  • Does it count if I have the button inside a ```div``` and that ```div``` has an ```id```, and the javascript uses that ```id``` to determine whether the ```div``` appears or not? – Mark Oct 26 '20 at 20:32
  • No. It doesn't matter whether it appears, just whether it's in the DOM. – Barmar Oct 26 '20 at 20:33
  • Do you have multiple buttons with the same ID? IDs have to be unique, and the selector will only select the first one. – Barmar Oct 26 '20 at 20:34
  • Hmm, that is strange because the button is definitely in the DOM and no I don't have multiple elements using the same ```id```. It's only for the button. – Mark Oct 26 '20 at 20:36
  • What happens if you put `console.log($("#test1").length)` right before the `.click()` function. – Barmar Oct 26 '20 at 20:37
  • Maybe playing with one of these fiddles will help? http://jsfiddle.net/deshpandeakhil/4kGaR/ http://jsfiddle.net/iegik/PT7x9/ – react_or_angluar Oct 26 '20 at 20:41
  • It shows up as 1 – Mark Oct 26 '20 at 20:41
  • ```jsfiddle``` doesn't seem to like ```option2``` but likes ```option1```. I'm confused – Mark Oct 26 '20 at 20:46

2 Answers2

0

These use the JQuery library. Are you sure you have JQuery loaded on your page?

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

What error is your console giving, if any?

Both options work for me.

Option1 = https://jsfiddle.net/wt78mqz3/1/

Option2 = https://jsfiddle.net/wt78mqz3/2/

Dexterians
  • 1,011
  • 1
  • 5
  • 12
0

After the document is loaded you want to use, if and only if you are adding the button dynamically to the page using JavaScript:

$(document).on("click","#test1",function(){
    console.log("TEST123")
})
lopezdp
  • 1,538
  • 3
  • 21
  • 38