<a> 标签上的点击事件在 JQuery 中不起作用

Question

我正在尝试更改 <a> 标签上的点击事件。

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">

        <title>JQuery test</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

         <script>
             $(document).ready(function () {
                alert('doc. ready');
    
                $('#id_product_quick').on('click', function (e) {
                    alert('click');
    
                    e.preventDefault();
    
                    loading();
    
                })
    
            });

       </script>

    </head>

    <body>
       <a id="#id_product_quick" class="col-md-4" href="/scr/quick/3/"><img style="width: 200px" src="/static/img/icons/Button.png"></a>

    </body>

</html>

JavaScript 成功加载并提醒 $(document).ready，但是当我点击 <a> 标签时，我被重定向到原来的 href，当我想逃避默认设置时行动或警报 'click'.

谁能帮我解决我的问题？

Answer 1

从 HTML 的 Id 属性中删除 #。

<a id="id_product_quick" class="col-md-4" href="/scr/quick/3/"><img style="width: 200px" src="/static/img/icons/Button.png"> </a>

或者，在附加事件处理程序

时使用 \ 从选择器中转义元字符 #

$('#\#id_product_quick').on('click', function (e) {
    alert('click');
    e.preventDefault();
    loading();
})

见Docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \.

<a> 标签上的点击事件在 JQuery 中不起作用

Click event on <a> tag doesn't work in JQuery

javascript

anchor

jquery

onclick

jquery-events