Click event not working but works when put in console

Question

Here is my HTML code.

<p>Men's Shirt (on hanger) 
<span class="cart_minus"> - </span>
<span class="cart_add"> + </span> 
<label class="text_right"> 2 Suits </label> </p>
<div class="total"> Total <span>£22.00</span></div> 
<a href="" class="order_now"> Order now </a>

JQuery code.

$(document).ready(function() {
$('.cart_minus').click(function () {
            alert("hai");
});
});

When I put same code in console then alert is shown. How could I solve this.

Where are you including your jQuery library? Also, are these DOM elements being created dynamically? — Adam, Mar 12 '18 at 14:09
Assuming you included jQuery properly, your code works fine https://jsfiddle.net/smvvjm1r/ — j08691, Mar 12 '18 at 14:10
@Adam I have included the JQuery library. Other Jquery functions are also working properly. — Sandra, Mar 12 '18 at 14:12
You get any errors in console? is `.cart_minus` added dynamically? — Huangism, Mar 12 '18 at 14:12
@sandra then you need to delegate the click event to a parent — Huangism, Mar 12 '18 at 14:13
if the elements are created dynamically, you have to attach the event after they are created — LPZadkiel, Mar 12 '18 at 14:22

Ankit Agarwal · Accepted Answer · 2018-03-12T14:17:01.823

4

You might be missing the JQuery library in your HTML file. Your code works well. Also if they are created dynamically you can use this code below which will add an event listener to the dynamically created element and attach it to the document object.

$(document).on('click','.cart_minus', function () {
    alert("hai");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Men's Shirt (on hanger) 
<span class="cart_minus"> - </span>
<span class="cart_add"> + </span> 
<label class="text_right"> 2 Suits </label> </p>
<div class="total"> Total <span>£22.00</span></div> 
<a href="" class="order_now"> Order now </a>

edited Mar 12 '18 at 14:17

answered Mar 12 '18 at 14:10

Ankit Agarwal

30,378
5
37
62

OP states that he included jQuery properly and has no errors in the console – j08691 Mar 12 '18 at 14:13
1

@j08691 edited my answer based on what OP says to have element created dyncmically – Ankit Agarwal Mar 12 '18 at 14:17

score 1 · Answer 2 · answered Mar 12 '18 at 14:11

1

All of your code is working fine for me. Just make sure you added jQuery before using it.

<p>Men's Shirt (on hanger) 
<span class="cart_minus"> - </span>
<span class="cart_add"> + </span> 
<label class="text_right"> 2 Suits </label> </p>
<div class="total"> Total <span>£22.00</span></div> 
<a href="" class="order_now"> Order now </a>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.cart_minus').on('click', function () {
      alert("hai");
        });
    });
</script>

answered Mar 12 '18 at 14:11

kevinniel

1,088
1
6
14

OP states that he included jQuery properly and has no errors in the console – j08691 Mar 12 '18 at 14:13
the point is all of his code works, so there's no other explanation than this one... – kevinniel Mar 12 '18 at 14:14
Yes there is and it's been uncovered in the comments above. The OP is adding the elements dynamically. – j08691 Mar 12 '18 at 14:15
Of course there is another explanation ;) they are creating the elements dynamically / on the fly and thus aren't attached to the DOM. – Adam Mar 12 '18 at 14:15
well right ! my bad – kevinniel Mar 12 '18 at 14:16

Click event not working but works when put in console

2 Answers2