调用jQuery函数后页面重新加载

Question

I have a div which I am checking for a condition at $(document).ready(function ()) , then deciding whether to show it or not.

There is a button inside the div which fades out the entire div. The problem is after calling the fadeout() function, the $(document).ready(function ()) gets called again(ie the page gets reloaded) and it again satisfies the condition to show the div.

I want to prevent the page from reloading after the fadeout() function gets called.

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

You've wrapped the image in a a tag. You'll need to use preventDefault to prevent the page from reloading on the click event of the a tag. or remove the a tag altogether.

Answer 2

Try to move the onclick event into the link element (nested into the span ) and change your function like so

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

Answer 3

Remove the onclick="fadeoutbox()" part and add this handler:

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

Answer 4

Try this :

$(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 5

you can do one of these :

1. Put # for href
2. return false at the end of the fadeoutbox
3. use e.preventDefault() like other guys said