Question

我不知道如何解释我的情况，如果您能更清楚地解释，请编辑我的问题。

我能够从window.load或document.ready覆盖锚标记的点击事件，但是当我从用户创建的函数中尝试它时会出现问题。

我的JavaScript代码是：

$('#up').click(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");
        attachUnvote();
});
    $('#down').click(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");

    attachUnvote()
    });

function attachUnvote()
{
    $('#unvote').click(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>");
});
}

我的目标是在attachUnvote()函数设置#Vote元素的HTML之后，它应该调用attachUnvote()函数之上的代码。我试图将其上面的代码放在另一个函数中，并在attachUnvote()中调用该函数，但它无效。

您可以在此处找到实时演示，HTML和CSS：http://jsfiddle.net/aishwaryashivapareek/xV3x8/

Answer 1

您可以通过在#Vote包装器上使用委托事件处理程序来避免附加和取消附加这些事件处理程序。

您的更新代码如下所示：

$('#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>");
});

Answer 2

事件授权是要走的路。

我可能会在这里挑剔，但这也使编码变得有趣而不是陷入意大利面。有一些指示可以让你的生活更轻松。

避免使用内联样式。而是使用类。（有助于分离关注点）使用函数来避免重复代码。

<强> 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);
});

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

<强> Working Fiddle

无法覆盖单击事件以从用户创建的函数锚定标记

2 个答案: