Перезагрузка страницы после вызова функции jquery

Question

У меня есть div, который я проверяю для условия на $(document).ready(function ()), а затем решаю, показывать это или нет.

Внутри div есть кнопка, которая затемняет весь div. Проблема в том, что после вызова функции fadeout() снова вызывается $(document).ready(function ()) (т. Е. Страница перезагружается), и он снова удовлетворяет условию отображения div.

Я хочу предотвратить перезагрузку страницы после вызова функции fadeout().

HTML

<div class="success"><%: ViewData["successResult"] %>
<br /><br />
<span id="closenotification" class="buttons" onclick="fadeoutbox()"><a href="" ><img src="<%= Url.Content("~/Content/Images/door_out.png") %>" alt="" />Close</a></span>
</div>

Javascript

function fadeoutbox() {
    $(".success").fadeOut(5000, function () {
        /*$(".success").css("display", "none");
     $("#closenotification").css("display", "none");*/
    });

}

$(function () {
    var successres = '<%= ViewData["successResult"] %>';
    //alert(successres != null);
    if (successres != "") {
        var leftpos = screen.width / 2 - 350;
        var toppos = screen.height / 2 - 125;
        $(".success").css("left", leftpos);
        $(".success").css("top", toppos);
        $(".success").css("display", "block");
        $("#closenotification").css("display", "block");
    }

    if ($(".failure").html() != "") {
        var leftpos = screen.width / 2 - 350;
        var toppos = screen.height / 2 - 125;
        $(".failure").css("left", leftpos);
        $(".failure").css("top", toppos);
        $(".failure").css("display", "block");


    }
});

Answer 1

Вы обернули изображение в тег a.Вам нужно будет использовать protectDefault , чтобы предотвратить перезагрузку страницы по событию click тега a.или вообще удалите тег a.

Answer 2

вы можете сделать одно из следующих действий:

1. Put # для href
2. вернуть false в конце fadeoutbox
3. use e.preventDefault() как говорили другие парни

Answer 3

Попробуйте это:

$ (function () {

var successres = '<%= ViewData["successResult"] %>';
//alert(successres != null);
if (successres != "") {
    var leftpos = screen.width / 2 - 350;
    var toppos = screen.height / 2 - 125;
    $(".success").css("left", leftpos);
    $(".success").css("top", toppos);
    $(".success").css("display", "block");
    $("#closenotification").css("display", "block");

    return;
}

if ($(".failure").html() != "") {
    var leftpos = screen.width / 2 - 350;
    var toppos = screen.height / 2 - 125;
    $(".failure").css("left", leftpos);
    $(".failure").css("top", toppos);
    $(".failure").css("display", "block");

    return;
}

});

Answer 4

Удалите часть onclick="fadeoutbox()" и добавьте этот обработчик:

$('#closenotification').click(function(e) {
    e.preventDefault();
    fadeoutbox();
});

Answer 5

Попробуйте переместить событие onclick в элемент ссылки (вложенный в span) и изменить свою функцию следующим образом:

function fadeoutbox(evt) {
    evt.preventDefault();
    $(".success").fadeOut(5000, function () {
       ...
    });
}