0

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

$(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 演示在这里

4

1 回答 1

0

您的工作解决方案的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;
    });
});​
于 2012-04-14T23:55:21.260 回答