как предотвратить перезагрузку страницы или обновление страницы после нажатия кнопки закрытия диалогового окна 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); 
    }); 
}); 

Надежда, что помогает.