2017-01-03 84 views
0

我试图改变我的<a>标记上的点击事件。点击事件<a>标记在JQuery中不起作用

<!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点击”。

任何人都可以帮我解决我的问题吗?

回答

3

从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

使用任何元字符(如“! #$%&'()* +,。/:; < =>?@ [] ^`{|}〜)作为名称的文字部分,必须用两个反斜杠进行转义:\\