如何防止页面重新加载或页面刷新后点击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); 
    }); 
}); 

希望有所帮助。