Question

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

任何更好的方式将它放在一起（我确定在那里）？

请查看演示，您还可以在其中查看changeElementType功能

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

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

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

你可能正在使用.on以及jQuery 1.7优先使用.bind。

我建议的另一件事是，每当你挣扎于这样的事情时，只需将google（或其他......）完全放入你想要的东西，在这种情况下，“jquery get input of input”将获得asw的第一个结果{{ 3}}

这样你就不会忘记它;）

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

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

jquery documentation

Jquery重命名标记内的内容并确认它

2 个答案: