如何防止頁面重新加載或頁面刷新後點擊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); 
    }); 
}); 

希望有所幫助。