如何在<a>标签上暂停执行？

Question

I have the code

<a href="<?php echo site_url('company/remove_company/'.$value['id']).'/'.$value['company_name']; ?>" title="Remove Data"><i class="icon-trash"></i></a>

and I have another code written in jquery and using sweetalert function which will popup a warning message if the user are trying to delete record in the database.

$(".icon-trash").click(function(){
    swal({
      title: "Are you sure?",
      text: "You will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, delete it!",
      closeOnConfirm: false }, function() {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
      });
  });

the problem of my code is, when the user click on the link, it will popup very fast, and go to the link given in href attribute. I would like to prevent it from going to the link, allowing the popup to stay display until the user decide whether to click the yes delete it or cancel and will not go to the link if the user click the cancel.

Any Help? I don't know what to do about it.

Answer 1

You need to prevent the default action, and upon success, proceed with the location change:

$(".icon-trash").click(function(e) {
    var that = this;
    // Prevent the default action.                                      « Look here.
    e.preventDefault();
    swal({
      title: "Are you sure?",
      text: "You will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, delete it!",
      closeOnConfirm: false }, function() {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
        // In this confirm, add the location.                           « Look here.
        location.href = $(that).attr("href");
      });
  });

Also, it is always better not to have any kind of database write functions like:

• Creating a new entry.
• Deleting an entry.

In the GET method. It is dangerous. So you should really think of changing it by giving a POST method and execute it through JavaScript / AJAX.