javascript - Append Div Class to Hyperlink Class — then Clone & Append Hyperlink To Container on Click -
- i want append div class ('.link-cloner') hyperlink class ('.link') when hover on any hyperlink (that has '.link' class).
- then when click on appended (.link-cloner) class, want clone hyperlink appended to, , append (link) #container.
i'm there, can't make last part work.
codepen: http://codepen.io/strengthandfreedom/pen/jxeeqp/
i tried using find(), closest() & $(this) in various combinations, can't make clone hyperlink (not linkcloner) , append #container.
jquery:
$(document).ready(function(e) { /* ------------------------ part 1 — works --------------------------*/ // store link-cloner div in variable var linkcloner = $('<div class="link-cloner">cloner</div>'); // when mouse hover on hyperlink $('.link').on('mouseover', function() { // append link-cloner class hyperlink $(this).append(linkcloner); }).mouseleave(function() { //on mouse leave, remove link-cloner $(linkcloner).remove(); }); /* ------------------------ part 2 — doesn't work --------------------------*/ //then when click on appended linkcloner, clone hyperlink , append #container $(linkcloner).on('click', function() { // code wrong.... event.preventdefault(); $('.link').clone().append('<li></li>').appendto('#container'); }); });
can lead me in right direction? javascript or jquery, either fine me (i'm learning both) :-)
you have done small mistake. replace part 2 below code :
$('.link').on('click', function(event) { // code wrong.... event.preventdefault(); $(this).clone().append('<li></li>').appendto('#container'); });
Comments
Post a Comment