Question

我正在尝试添加一些功能，以便能够内联编辑注释。到目前为止，它非常接近，但我遇到了试图触发第二个事件的问题。它是第一次工作，但在那之后，失败了。

$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;

$editBtn.on('click', $editBtn, function() {
    clicked = true;
    var $that = $(this);
    var $form = $that.closest('.js-edit-comment');
    var $commentTextBody = $that.closest('div').find('.js-comment-body');
    var commentText = $commentTextBody.text();
    var $editableText = $('<textarea />');

    if ($that.text() === 'Save Edits') {
        $that.text('Saving...').attr('disabled', true);
    } else {
        $that.text('Save Edits').attr('alt', 'Save your edits');
    }

    // Replace div with textarea, and populate it with the comment text
    var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
        $editableText.val(commentText);
        $commentTextBody.replaceWith($editableText);
        $editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
    };
    makeDivTextarea($editableText, commentText, $commentTextBody);


    var saveEdits = function($that, $editableText) {
        $that.on('click', $that, function() {
            if (clicked) {
                var comment = $that.closest('div').find('.js-edited-comment').val();

                $editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
                $that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
                $('#output').append('saved');
                clicked = false;
                return false;
            }
        });
    };
    saveEdits($that, $editableText);
    return false;
});

}）;

jsfiddle demo here

Answer 1

Hiya 演示为您的工作解决方案：http://jsfiddle.net/8P6uz/

clicked=true是问题:)）我已经纠正了另一件小事。 i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.

小记：如果我建议使用按钮的ID，或者如果有很多编辑按钮，请尝试使用您已经考虑过的this;我会看看我是否可以写得更清洁，但有时会是后者，但这应该可以解决你的问题。 :)享受！

Jquery代码

$(function() {
    var $editBtn = $('.js-edit-comment-btn');
    var clicked = false;

    $editBtn.on('click', $editBtn, function() {
        clicked = true;
        var $that = $(this);
        var $form = $that.closest('.js-edit-comment');
        var $commentTextBody = $that.closest('div').find('.js-comment-body');
        var commentText = $commentTextBody.text();
        var $editableText = $('<textarea />');

        if ($that.text() === 'Save Edits') {
            $that.text('Saving...').attr('disabled', true);
        } else {
            $that.text('Save Edits').attr('alt', 'Save your edits');
        }

        // Replace div with textarea, and populate it with the comment text
        var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
            $editableText.val(commentText);
            $commentTextBody.replaceWith($editableText);
            $editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
        };
        makeDivTextarea($editableText, commentText, $commentTextBody);


        var saveEdits = function($that, $editableText) {
            $that.on('click', $that, function() {
                if (clicked) {
                    var comment = $that.closest('div').find('.js-edited-comment').val();

                    $editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
                    $that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
                    $('#output').text("");
                    $('#output').append('saved');
                    clicked = true;
                    return false;
                }
            });
        };
        saveEdits($that, $editableText);
        return false;
    });
});

在一个按钮上切换两个事件

1 个答案: