Question

我有一个锚标记

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

与查询功能链接

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

任何人都可以帮我弄清楚为什么我不能多次点击此链接？

Answer 1

像这样使用，

    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

你需要这样的东西???

<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

具有jQuery功能的锚标签不会多次启动

2 个答案: