Anchor tag with jQuery function doesn't initiate more than once

Question

I have an anchor tag

<a href="javascript:void(0);" class="edit"> <div class="text">original</div><div class="active-text hidden">hide</div></a>

with a query function linked

//activate editing
$('.edit').on("click", function(e){
    e.preventDefault();
    $(this).find('.text').addClass('hidden');
    $(this).find('.active-text').removeClass('hidden');
    $(this).prev('span').attr('contenteditable', 'true').addClass('active-editing');
});

//deactivate editing
$('.edit-tag.noli .active-text').on("click", function() {
    $(this).parent().find('.text').removeClass('hidden');
    $(this).parent().find('.active-text').addClass('hidden');
    $(this).prev('span').attr('contenteditable', 'false').removeClass('active-editing');
});

Can anyone help me figure out why I cannot click this link more than once?

Answer 1

Use like this,

    var flag = true;
$('.edit').on("click", function (e) {
    e.preventDefault();
    $(this).find('.text').addClass('hidden');
    $(this).find('.active-text').toggleClass('hidden');
    if (flag) {
        $(this).prev('span').attr('contenteditable', 'true').addClass('active-editing');
    } else {
        $(this).prev('span').attr('contenteditable', 'false').removeClass('active-editing');
    }
    flag = false;
});

Demo

Answer 2

You need something like this???

<a href="javascript:void(0);" class="edit">show-hide</a>
<div class="text">original</div>
<div class="active-text" style="display:none;">hide</div>

$('.edit').on("click", function () {
    //since void(0) no need for prevent default
    $('.text').toggle();
    $('.active-text').toggle();
    $(this).prev('span').attr('contenteditable', 'true').addClass('active-editing');
});

jsfiddle demo