点击事件不会触发答案

【问题标题】：The click event won't trigger点击事件不会触发
【发布时间】：2020-12-27 03:43:13
【问题描述】：

在我创建的表格上，有一个嵌入了十字图标的锚标记，我想为它分配一个事件，但是当我单击它时没有任何反应。我尝试了各种方法，包括 $(".remove1"), $("#productTable tbody tr td a"),... 然后我尝试通过设置断点在chrome中调试，但它不会进入函数。表格

<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");
    });
});

当我点击控制台中没有写出的任何内容时，请帮忙。

【问题讨论】：

这应该可以工作$("a.product-remove").click(function () { console.log("test"); });
@ParampreetRai 我试过不行
控制台有错误吗？
那么您需要委托单击事件，其起点位于您的 HTML 中，从开始：$("#some_element > .product-remove a")
这能回答你的问题吗？ How do I attach events to dynamic HTML elements with jQuery?

标签： javascript html jquery hyperlink

【解决方案1】：

纯 JS：

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

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

你需要给锚标签一些可点击的区域：

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

【讨论】：