javascript - jQuery - 多次替换 HTML 元素

Question

我想用输入字段替换按钮，用户在其中输入内容并按回车按钮。之后，从头开始的按钮应该再次出现。我的脚本到目前为止可以运行，但一旦完成就无法重复此操作。

更新:如果显示输入字段但用户不想输入任何内容并单击其他位置，则该按钮也应该再次出现。

代码:

<button id="createButton">Create item</button>

/* 
     jquery stuff
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
        $(document).ready(function() {
            $('#createButton').click(function( event ) {
                $(this).replaceWith('<input type="text" id="buttonInput" placeholder="e.g. books, movies" autofocus>');  
            });


            $(this).on('keypress', function (event) {
                if(event.which == '13'){ // If enter button is pressed
                    alert('You entered something');

                    $('#buttonInput').replaceWith('<button id="createButton">Create item</button>');
                }
            });

        });
</script>

更新 2: 我使用 hide() 和 show() 更新了代码以获得相同的结果。但是，如果用户单击正文内的某个位置，我怎样才能让输入消失而没有冗余呢？

新代码:

<button id="createButton">Create item</button>
<input type="text" id="input" placeholder="e.g. books, movies" autofocus>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        $('#input').hide();

        $(document).on('click', '#createButton', function (event) {
            $(this).hide();
            $('#input').show().focus();
        });

        $('#input').on('keypress', function (event) {
            if (event.which == '13') { // if enter button is pressed
                $(this).hide().val('');
                $('#createButton').show();
            }
        });
    });
</script>

Answer 1

正如其他答案所说，您要替换元素 (createButton)，这意味着 click 处理程序不再绑定(bind)。

您可以使用 on 通过 #createButton 选择器重新绑定(bind)或绑定(bind)到父元素。

$(document).on('click','#createButton', function( event ) {
    ...
});

实际上并不使用 document - 使用任何不会被替换的父元素(也许是 div？)

不过，替换 DOM 元素是一个糟糕的方法 - 您最好将元素保留在页面上，并使用 show 和 hide。

http://jsfiddle.net/v03j8bns/

更新答案

Here's a fiddle显示 show/hide/方法。处理:

The button should also appear again, if the input field is shown but the user don't want to enter anything and clicks somewhere else.

单击按钮时，我会在文本框上调用 focus() 。我还连接了一个 blur() 事件处理程序，因此如果用户单击/跳出选项卡，它将隐藏文本框并显示按钮。