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

Question

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

有没有更好的方法将它们组合在一起(我确信有一个)？

请查看演示，您还可以在其中看到changeElementType函数

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

这是您更新的代码和工作 fiddle 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