How do you make a click event for an entire class of buttons? jquery

Question

<div id="tipboard">
                <!--TIPS WILL POPULATE HERE-->
  <li>This is my fully informed tip about the environment and saving puppies<button class="btnLike"           type="button" id="1"></button>
  </li>
  <li>This is a tip!<button class="btnLike" type="button" id="2"></button>
  </li>
</div>

 $(".btnLike").click(function () {
    console.log(this);
    addLike(this);
  });

var addLike = function (likeButton) {
  var idToShow = $(likeButton).attr("id");
  console.log(idToShow);
};

I'm am not getting anything logging to the console. How do I select the current button from a click event using the jquery class selector?

If you're not getting anything logged to the console then you're probably running this code before the DOM is ready. — Mitya, Nov 27 '20 at 16:22
`$('.btnLink').click(...` should be working. Ensure your JS code is being executed after the DOM has loaded. Generally in jQuery this means using a document.ready event handler. — Rory McCrossan, Nov 27 '20 at 16:22
The javascript is all inside the document.ready handler. i am inserting the list items with append if that makes a difference — nickswink, Nov 27 '20 at 16:29
*I am inserting the list items with append* -> Change `$(".btnLike").click(function...` to `$(document).on("click", ".btnLike", function...` — freedomn-m, Nov 27 '20 at 16:33
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Nov 27 '20 at 16:33

score 0 · Answer 1 · answered Nov 27 '20 at 16:28

0

Your code looks right.

The only potential cause could be:

jQuery is not available and there's another custom $ defined for something else, thus not showing any error logs about $ not being defined.
Your code is run before the DOM is ready.

The first cause is highly unlikely so I suggest you try to run all your code after DOM is ready.

If you're not sure how to do it:

$(document).ready(function () {
  // Add your event handler and all other stuff here...
});

answered Nov 27 '20 at 16:28

technophyle

7,972
6
29
50

It is being run after the document.ready I haven't included the entire app.js because it is apart of a much larger project – nickswink Nov 27 '20 at 16:31
Are you absolutely sure you're clicking the button? From your code, it looks like your button doesn't have any text. – technophyle Nov 27 '20 at 16:36
it is an image that i added with css – nickswink Nov 27 '20 at 16:45
Try this: `$('.btnLink').on('click', function () {...`. Also, to be absolutely sure, add `console.log('abc')` instead of `this`, and see if it still does not print. – technophyle Nov 27 '20 at 16:46

score 0 · Answer 2 · answered Nov 27 '20 at 16:44

Your snippet isn't working because you haven't imported JQuery. - Run the snippet below to see it work.

 $(".btnLike").click(function () {
    console.log(this);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tipboard">
                <!--TIPS WILL POPULATE HERE-->
  <li>This is my fully informed tip about the environment and saving puppies<button class="btnLike"           type="button" id="1"></button>
  </li>
  <li>This is a tip!<button class="btnLike" type="button" id="2">Click Here</button>
  </li>
</div>

Additionally, if you want to ensure the DOM has loaded before your function runs you can declare the function like this:

$(document).on("click", ".btnLike", function () {
    console.log(this);
  });

score 0 · Answer 3 · answered Nov 29 '20 at 04:03

0

I ended up just calling the function from the generated s with onClick.

<li>${tip_message}<button class='btnLike' id=${tip_id} onClick='addLike(this, ${tip_likes})'></button>${tip_likes}</li>`

answered Nov 29 '20 at 04:03

nickswink

23
5

How do you make a click event for an entire class of buttons? jquery

3 Answers3