Open button with different data-attribute with jquery

Question

I am having a table with 3 buttonsand I am using jquery-"3.2.1" .

I am trying to use the below javascript-file Builder to load the proper data later in the if statements.

My expected output is:

If pressing f.ex.: the Add CPU button, then the alert message console.log("cpu clicked") should appear.

Below you can find my minimum viable example:

 class Builder { constructor() { this.events(); } // end constructor events() { $(".btn btn-primary btn-sm").on("click", this.ourClickDispatcher.bind(this)); } // methods ourClickDispatcher(e) { var currentButton = $(e.target).closest(".btn btn-primary btn-sm"); console.log("test") if (currentButton.data('exists') == 'cpu') { console.log("cpu clicked") } if (currentButton.data('exists') == 'motherboard') { console.log("motherboard clicked") } if (currentButton.data('exists') == 'graphic-card') { console.log("graphic-card clicked") } } } export default Builder; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table style="float: left;" class="table table-bordered"> <tbody> <tr> <td>CPU</td> <td> <button type="button" data-cpu="cpu" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"> Add CPU </button> </td> </tr> <tr> <td>Motherboard</td> <td> <button type="button" data-motherboard="motherboard" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"> Add Motherboard </button> </td> </tr> <tr> <td>Graphic Card</td> <td> <button type="button" data-graphicCard="graphic-card" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"> Add Graphic Card </button> </td> </tr> </tbody> </table> 

As you can see all 3 buttons have the same class attribute, but differentiate in the data- attribute to load the proper output.

Any suggestions why the below script does not give me the expected output if any of the buttons is clicked?

I appreciate your replies!

Answer 1

If with $(".btn btn-primary btn-sm") you want to target the element with all these classes then you need to use

$(".btn.btn-primary.btn-sm")

( no spaces and a . for each class, that is is the correct css syntax )

Secondly, your data attributes ( according to your script ) should all be named data-exists with a different value, and not a differently named attribute for each.

so

<button type="button" data-exists="cpu"  ...> 
<button type="button" data-exists="motherboard"  ...>
<button type="button" data-exists="graphic-card"  ...>

---

if you indeed wanted to check for the existance of that attribute you should use

if (currentButton[0].dataset.cpu) {...}
if (currentButton[0].dataset.motherboard) {...}
if (currentButton[0].dataset.graphicCard) {...}

or if you have to use jQuery ( browsers not supporting dataset ) use the .is method

if (currentButton.is('[data-cpu]')) {...}
// etc