Unable To Override Click Events To Anchor Tag From A User Created Function

I don't know how to explain my situation, please edit my question if you can explain it more clearly. I am able to override click events of anchor tag from window.load or document

Solution 1:

You can avoid having to attach and unattach these event handlers by using a delegated event handler on the #Vote wrapper.

Your updated code would look like this:

$('#Vote').on('click','#up',function(){
    $('#Vote').html("<div id=\"aniDiv\" style=\"background:green;height:25px;width:80px;position:absolute;float:left\" class=\"base\"></div><div class=\"overlay\"><a style=\"text-decoration:none;color:black\" id='unvote' href=\"#\">You upvoted. Click to take vote back.</a></div>");
    $("#aniDiv").animate({width:"10px"});
    $("#Vote").width("350px");
});

$('#Vote').on('click','#down',function(){
    $('#Vote').html("<div id=\"aniDiv\" style=\"background:red;height:25px;width:50px;position:absolute;float:left\" class=\"base\"></div><div class=\"overlay\"><a style=\"text-decoration:none;color:black\" id='unvote' href=\"#\">You downvoted. Click to take vote back.</a></div>");
    $("#aniDiv").animate({width:"10px"});
    $("#Vote").width("350px");
});

$('#Vote').on('click','#unvote',function(){
    $('#Vote').html("<a style='text-decoration:none;background-color:green;padding:3px;color:white;' id='up' href='#'>Up</a><a style='text-decoration:none;background-color:red;padding:3px;color:white' id='down' href='#'>Down</a>");
});

Solution 2:

Event delegation is the way to go.

I might be nitpicking here but this also makes coding fun instead of falling into a spaghetti mess. Have some pointers which would make your life easier.

Avoid inline styles. use classes instead. (Would help in separation of concerns) Use functions to avoid repetitive code.

HTML

<div id='Vote' style="margin:0">
    <a class="p-small bg-green"id='up' href="#">Up</a>
    <a class="p-small bg-red"id='down' href="#">Down</a>
</div>

CSS

body {
    font-family:'segoe ui'
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 10px;
    z-index: 10;
}
.base {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
}
/* Default styling for anchors */a {
    text-decoration:none;
    color: white;
}
.p-small {
    padding: 3px;
}
.bg-red {
    background-color:red;
}
.bg-green {
    background-color:green;
}
.black {
    color: black;
}
#aniDiv {
    height: 25px;
    width: 80px;
}

JAVASCRIPT

var $defaultDiv =  "<a class='p-small bg-green' id='up' href='#'>Up</a>" 
                 + "<a class='p-small bg-red' id='down' href='#'>Down</a>",
    $animatedDiv = "<div id='aniDiv' class='base {{bg}}'></div>"
                +  "<div class='overlay'>"
+  "<a class='black' id='unvote' href='#'>You {{vote}}. Click to take vote back.</a></div>";

$('#Vote').on('click', '#up', function() {
    animateDiv("bg-green", true);
});

$('#Vote').on('click', '#down', function() {
    animateDiv("bg-red", false);
});

$('#Vote').on('click', '#unvote', function() {
    $('#Vote').html($defaultDiv);
});

functionanimateDiv(bgColor, upVoted) {
    $('#Vote').html($animatedDiv.replace("{{bg}}", bgColor)
                    .replace("{{vote}}", upVoted ? "upvoted" : "downvoted"));
    $("#aniDiv").animate({
        width: "10px"
    });
    $("#Vote").width("350px");

Working Fiddle