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处理程序不再受约束。

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

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

实际上并没有使用document - 使用父元素是什么，哪些不会被替换（也许是div？）

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

http://jsfiddle.net/v03j8bns/

更新了答案

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

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

单击该按钮时，我会在文本框中调用focus()。我还联系了一个blur()事件处理程序，因此如果用户点击/标签，那么它会隐藏文本框并显示按钮。

Answer 2

您必须再次将click事件绑定到新创建的按钮：

       $(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 pressed
                   //Disable textbox to prevent multiple submit
                   alert('You entered something');

                   $('#buttonInput').replaceWith('<button id="createButton">Create item</button>');
               }

               $('#createButton').bind('click', function (event) {
                   $(this).replaceWith('<input type="text" id="buttonInput" placeholder="e.g. books, movies" autofocus>');
               });
           });
       });

Answer 3

您遇到此问题是因为您替换了DOM元素。这意味着您的新元素按钮不再具有单击处理程序。

我建议您使用show/hide之类的内容或使用jQuery委托on/bind来处理点击。

Answer 4

当您在动态更改DOM并希望自动将侦听器分配给在某些时间点可能存在或可能不存在的元素时，您需要使用delegated event listeners。

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

这些处理程序可以运行，但是你可以加扰DOM。

jQuery - 多次替换HTML元素

4 个答案: