The click event won't trigger

Question

On the table I created, there is an anchor tag embedded with a cross icon and I want to assign an event to it, however when I click it nothing happen. I have tried various way including $(".remove1"), $("#productTable tbody tr td a"),... Then I try to debug in chrome by setting up breakpoint but it just won't go into the function. the table

<table class="table" id="productTable">
    <thead class="thead-primary">
        <tr class="text-center">
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>Product name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr class="text-center">
            <td class="product-remove"><a href="#/"><span><i class="ion-ios-close remove1"></i></span></a></td>
            <td class="image-prod">
                <div class="img" style="background-image:url(images/beef.jpg);"></div>
            </td>
            <td class="product-name">
                <h3>Beef Noodles Soup</h3>
            </td>
            <td class="price">RM12.00</td>
            <td class="quantity">
                <div class="input-group mb-3">
                    <button class="quantity-left-minus">-</button>
                    <input type="text" name="quantity" class="quantity form-control input-number" value="2" min="1" max="100">
                    <button class="quantity-right-plus">+</button>
                </div>
            </td>
            <td class="total">RM24.00</td>
        </tr>
        <tr class="text-center">
            <td class="product-remove"><a href="#/"><span><i class="ion-ios-close remove1"></i></span></a></td>
            <td class="image-prod">
                <div class="img" style="background-image:url(images/dumpling.jfif);"></div>
            </td>
            <td class="product-name">
                <h3>Dumpling</h3>
            </td>
            <td class="price">RM5.00</td>
            <td class="quantity">
                <div class="input-group mb-3">
                    <button class="quantity-left-minus">-</button>
                    <input type="text" name="quantity" class="quantity form-control input-number" value="1" min="1" max="100">
                    <button class="quantity-right-plus">+</button>
                </div>
            </td>
            <td class="total">RM5.00</td>
        </tr>
    </tbody>
</table>

jquery

$(function() {
    $(".product-remove a").on("click", function() {
        console.log("test");
    });
});

when i click on the a nothing written out in console, please help.

This should work ```$("a.product-remove").click(function () { console.log("test"); });``` — Parampreet Rai, Sep 08 '20 at 18:00
Is it a dynamic element or is it present when the page loads? — devlin carnate, Sep 08 '20 at 18:07
@devlincarnate it is a dynamic element I think loaded when the page created, I load data from local storage and created the table — Html newbie, Sep 08 '20 at 18:09
then you need to delegate click event with starting point that is in your HTML from start: `$("#some_element > .product-remove a")` — ikiK, Sep 08 '20 at 18:13
@ikiK what is mean by delegate click event with starting point? — Html newbie, Sep 08 '20 at 18:14
You triggered an event when page loads. Instead, you can move this function at the end of set of other commands which loads table data dynamically. — Parampreet Rai, Sep 08 '20 at 18:14
@ikiK I think it should be ```$("#some_element > .product-remove > a")``` — Parampreet Rai, Sep 08 '20 at 18:16
`$("#some_element > .product-remove a")` Make `#some_element `an parent element that is in your HTML, not dynamical loaded. — ikiK, Sep 08 '20 at 18:16
@ParampreetRai No it does not, check HTML markup, there's also jsfdile. — ikiK, Sep 08 '20 at 18:17
Does this answer your question? [How do I attach events to dynamic HTML elements with jQuery?](https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery) — devlin carnate, Sep 08 '20 at 18:20
@ikiK thank anyway, i find another way that by using $(document).on("click",".remove1",function(){}); it was able to trigger the console log. Anyway a big tahnks — Html newbie, Sep 08 '20 at 18:24

score 0 · Answer 1 · answered Sep 08 '20 at 18:25

Plain JS:

const icons = document.querySelectorAll('.product-remove a');

icons.forEach(element => {
  element.addEventListener("click", function(e){
    e.preventDefault();
    console.log("yeah");
  })
});

You need to give the anchor tag some sort of clickable area though:

.product-remove a{
  display: block;
  padding: 8px;
  background: goldenrod;
}

The click event won't trigger

1 Answers1