Question

我有这个HTML：

<a href="http://www.google.com"  data-ref="su1c2cess" class="Wifewriting" id="target_site_to_visit">
    <span data-app-id="63" class="btn" id="visit_site" style="right:22px; top:65px; padding:5px;z-index: -99999;">VISIT SITE</span>
</a>

更新这是我的jQuery：

 $(document).ready(function(){
         $('body').on('click','#target_site_to_visit',function(event){
           var appName=$('#target_site_to_visit').attr('class');
           var referrer=$('#target_site_to_visit').attr('data-ref');
          $.post('db/update_site_viewed.php',{ name:appName, ref:referrer }, function(data){



      throw new Error("AppName: "+appName);

      },'html').error(function(data){

      throw new Error("Error: "+data.responseText);
      });
    // document.location.href=$('#target_site_to_visit').attr('href');
return false;
  });

});

event.preventDefault();无法阻止链接被触发..为什么？

Answer 1

从jQuery.on文档中，我会确保您的函数返回false。

从事件处理程序返回false将自动调用 event.stopPropagation（）和event.preventDefault（）。

Answer 2

只要您的控制台和有效标记中没有错误，return false就会阻止事件的默认操作，并阻止它如您所知那样冒泡DOM。

$(document).ready(function(){
    $('body').on('click','#target_site_to_visit',function(event){
        var appName=$('#target_site_to_visit').attr('class');
        var referrer=$('#target_site_to_visit').attr('data-ref');
        $.post('db/update_site_viewed.php',{ name:appName, ref:referrer }, function(data){
            throw new Error("AppName: "+appName);
        }, 'html').error(function(data){
            throw new Error("Error: "+data.responseText);
        });
        return false;
    });
});

要使用获取的数据，请使用$.post的回调函数中的第一个参数，该函数返回获取的数据：

$.post('db/update_site_viewed.php',{ name:appName, ref:referrer }, function(data){
        console.log(data); //<-- fetched html will be displayed in the console
}, html);

在回调函数中，您可以使用.html()，.append()和类似方法将数据添加到DOM，以及能够将其作为字符串进行操作，获取它的子元素通过将data包装在jQuery对象$(data)中，好吧，基本上可以用它做所有事情。

Reference

无法使用jquery阻止链接点击

2 个答案: