Question

I'm trying to alter a click event on my <a> tag.

<!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>

The JavaScript loads and alerts $(document).ready with success, but when I click on the <a> tag, I'm redirected to the original href when I want to escape the default action or alert 'click'.

Can anybody help me with my problem?

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

使用任何元字符（例如！＆＃34;＃$％＆amp;＆＃39;（）* +，。/：;＆lt; =＆gt;？@ [] ^`{| }〜）作为名称的文字部分，必须使用两个反斜杠进行转义：\\。

您正在使用的<a> tag doesn't work in JQuery

1 个答案:

您正在使用的<a> tag doesn&#39;t work in JQuery

1 个答案:

您正在使用的<a> tag doesn't work in JQuery