Why this click event doesn't work clicking a button in this JQuery script?

Question

it is a long time that I am not using JQuery and today I am finding some problem. I am working with a pretty old JQuery version (3.0.0) and I can't update it.

So my problem is that in my HTML code I have buttons like this:

<button class="btn-link js-delete" data-customer-id="1">Delete</button>

Then this is my JQuery script:

$("#customers").click(".js-delete", function () {
    alert("CLICK !!!");
});

This is my JSFiddle: https://jsfiddle.net/AndreaNobili/xpvt214o/906659/

The problem is that clicking on the button nothing happens

How can I try to solve this issue?

Answer 1

You are missing to wrap that button inside a element with id value as customers :

 $("#customers").click(".js-delete", function() { alert("CLICK !!!"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='customers'> <button class="btn-link js-delete" data-customer-id="1">Delete</button> </div>

But the suggested way would be to use the class of that button directly, if that class is unique to that button and that JS code will be for that button only:

 $(".js-delete").click(function() { alert("CLICK !!!"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn-link js-delete" data-customer-id="1">Delete</button>

Answer 2

Try this:

<button class="btn-link js-delete" data-customer-id="1">Delete</button>



$(".js-delete").click(".js-delete", function () {
    alert("CLICK !!!");
});

your code selects an element with #costumers and not your button since it has no id with customers

Answer 3

The selector in this case is ".js-delete". First you need to call the selector and than the event.

$(".js-delete").click(function () {
    alert("CLICK !!!");
});

Answer 4

you called the element by ID (#customer) but there is no ID attribute in Button. replace buttom Element with this : Delete

Answer 5

你忘了给按钮id="customers" 。