单击jquery对话框关闭按钮后如何防止页面重新加载或页面刷新

Question

关闭对话框时，整个页面会刷新。我该如何避免？请参阅下面的代码：

// delete button  
<a id="confirmDelete" class="button orange" href="#"     onclick="goDelete(this);">Delete</a>  

// function goDelete that opens a dialog.  
function goDelete(a) {
    var id = a.closest("[data-id]").getAttribute("data-id");
    var url = window.location.origin + "/nurse_notes/delete_confirm.jsf?visitId=" + id;
    //Create a Div, then append a new iframe inside of it
    var dialog = $('<div>').append($('<iframe>').attr('src', url).css({"height":"300","width":"500"}));
    $(dialog).dialog({
        autoOpen: true,//Means open this now
        title: "Delete Confirmation",
        width: 550,
        height: 375,
        modal: true,
        position: {my: "center", at: "center",of: "body"}
    });
}  

问题是，当我单击对话框中的删除或取消按钮时，它会刷新页面。如何在此处停止页面刷新？

HTML 取消 我正在做这样的事情，但它仍然刷新页面:(

我对 jquery 很陌生，正在寻找关于我哪里出错的输入/反馈。谢谢！

Answer 1

这是一种可行的方法。

示例：http://jsfiddle.net/Twisty/6ty8hj99/

HTML

<ul>
  <li data-id="1">Item 1 <a id="confDel-1" class="button orange" href="#">Delete</a></li>
  <li data-id="2">Item 2 <a id="confDel-2" class="button orange" href="#">Delete</a></li>
  <li data-id="3">Item 3 <a id="confDel-3" class="button orange" href="#">Delete</a></li>
  <li data-id="4">Item 4 <a id="confDel-4" class="button orange" href="#">Delete</a></li>
  <li data-id="5">Item 5 <a id="confDel-5" class="button orange" href="#">Delete</a></li>
</ul>

JavaScript

function goDelete(a) {
  var id = $(a).parent().data("id");
  var url = var url = window.location.origin + "/nurse_notes/delete_confirm.jsf?visitId=" + id;
  console.log("Delete Confirm: " + url);

  var $diag = $("<div>").dialog({
    modal: true,
    width: 550,
    height: 375,
    title: "Delete Confirmation",
    position: {
      of: "body"
    },
    close: function() {
      $(this).dialog("destroy");
    }
  });
  var $frame = $("<iframe>").attr("src", url).css({
    width: 500,
    height: 300
  });
  $diag.append($frame);
}

$(function() {
  $(".button").button();
  $("a[id^='confDel']").click(function(e) {
    e.preventDefault();
    console.log("Click Event triggered by #" + $(this).attr("id"));
    goDelete(this);
  });
});

希望对您有所帮助。