Question

I have got this 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>

UPDATE
And this is my 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;
  });

});

The event.preventDefault(); does nothing in stopping the link from being triggered.. why?

Answer 1

As long as there are no errors in your console and valid markup, return false will prevent the event’s default action and prevent it from bubbling up the DOM as you know.

$(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;
    });
});

And to use the obtained data, use the first parameter in the $.post‘s callback function which returns the fetched data:

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

Inside the callback function you can use .html(), .append() and similar methods to add the data to the DOM, as well as being able to manipulate it as a string, get sub-elements of it by wrapping the data inside the a jQuery object $(data), and well, do basically everything you want with it.

Reference