无法覆盖点击事件以从用户创建的函数锚定标记 [英] Unable to override click events to anchor tag from a user created function

问题描述

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

我可以从window.load或document.ready覆盖锚点标记的点击事件，但是当我从用户创建的函数中尝试它时，问题就来了。 p>

我的JavaScript代码是：

  $（'＃up'）。 html（< div id = \aniDiv\style = \background：green; height：25px; width：80px; position：absolute; float：left\class = \base\>< / div>< div class = \overlay\>< a style = \ 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 ='＃'>向上< / a& text-decoration：none; background-color：red; padding：3px; color：white'id ='down'href ='＃'> Down< / a>）; 
}）; 
} 
  

我的目标是在 attachUnvote code>函数设置#Vote元素的HTML，然后它应该调用 attachUnvote（）函数上面的代码。我尝试将另一个函数中的代码放在另一个函数中，并在 attachUnvote（）中调用该函数，但它不工作。

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

解决方案

事件委托是要走的路。

我可能在这里进行淘汰，但这也使编码变得有趣，而不是陷入意粉混乱。有一些指针，这将使你的生活更容易。

避免内联样式。使用类。 （将有助于分离问题）
使用函数避免重复代码。

HTML

 < div id ='Vote'style =margin：0> 
< a class =p-small bg-greenid ='up'href =＃>上< / a> 
< a class =p-small bg-redid ='down'href =＃>向下< / 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; 
} 
 / *锚的默认样式* / 
 a {
 text-decoration：none; 
 color：white; 
} 
 .p-small {
 padding：3px; 
} 
 .bg-red {
 background-color：red; 
} 
 .bg-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 ='＃'>您{{vote}}点击即可投票回来。< / 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）; 
  

工作小提琴

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.ready but the problem comes when I am trying it from a user created function.

My JavaScript code is:

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

My objective is that after attachUnvote() function sets the HTML of #Vote element, then it should call the code just above attachUnvote() function. I tried to enclose the code above it in another function and called that function in attachUnvote() but its not working.

You can find Live Demo, HTML and CSS here: http://jsfiddle.net/aishwaryashivapareek/xV3x8/

解决方案

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

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

Working Fiddle

这篇关于无法覆盖点击事件以从用户创建的函数锚定标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！