Jquery重命名标签内的内容并确认

Question

用户应该能够更改名称，然后确认更改。我无法使用此代码将其存档，因为当我单击确认时，它会像以前一样返回。 我错过了什么？

有没有更好的方法来把它放在一起（我敢肯定有一个）？

请查看demo，您还可以在其中看到changeElementTypefunction

http://jsfiddle.net/dLk6E/

js:

$('.replace').on('click', function () {
    $("h2").changeElementType("textarea");
    $('.replace').hide();
    $('.confirm').show();

    //Confermation of the change
    $('.confirm').bind('click', function () {
        $('.replace').show();
        $('.confirm').hide();
        $("textarea").changeElementType("h2");
    });


    if ($('textarea:visible')) {
        $(document).keypress(function (e) {
            if (e.which == 13) {
                alert('You pressed enter!');
                $("textarea").changeElementType("h2");
                $('.replace').css('opacity', '1');
            }
        });
    }
});

Answer 1

这是您的更新代码和工作小提琴http://jsfiddle.net/dLk6E/

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    }
})(jQuery);



$('.replace').on('click', function (){
    $("h2").changeElementType("textarea");
    $('.replace').hide();

    $('.confirm').show();

    //Confermation of the change
    $('.confirm').on('click', function(){
        $('.replace').show();
        $('.confirm').hide();

        // you are missing this
        $('.replaceble').html($("textarea").val());

        $("textarea").changeElementType("h2");
    });




    if ($('textarea:visible')){
         $(document).keypress(function(e) {
            if(e.which == 13) {
                alert('You pressed enter!');
                $("textarea").changeElementType("h2");
                $('.replace').css('opacity','1');
            }
        });
    }


});

更新 jsfiddle.net/dLk6E/1

Answer 2

我认为您的代码是正确的，但您需要在替换它时使用您输入的值。因此，确认绑定将是这样的（获取它，然后在将其“转换”为 h2 标记之前使用它来更新 textarea。

$('.confirm').bind('click', function(){
    var valueEntered = $('textarea').val();
    $('.replace').show();
    $('.confirm').hide();
    $("textarea").html(valueEntered).changeElementType("h2");
});

您可以为此使用 .on 以及 jQuery 1.7 优于 .bind。

我建议的另一件事是，每当您遇到类似这样的事情时，只需将您想要的内容放入 google（或其他...）中，在这种情况下，“jquery 获取输入值”将得到 asw 第一个结果 @987654321 @

这样你就不会忘记它;)

更新：也许是一个小细节，但在我使用的绑定中，只需点击一次 $('textarea') 会更有效，所以它会是这样的。您可能要记住的事情（这里不是真正的问题），最好将其存储在变量中而不是多次访问 DOM。

$('.confirm').on('click', function(){
    var $textarea = $('textarea');
    $('.replace').show();
    $('.confirm').hide();
    $textarea.html($textarea.val()).changeElementType("h2");
});

jsfiddle