javascript - 用以前保存的元素替换元素(选择框)

Question

如果选择了一个选项，我有一些 javascript 可以将选择框更改为文本框，然后如果用户点击删除/退格键以清除文本框，则将该文本框更改回选择框。

http://jsfiddle.net/5e1stz46/6/

<select id='visit'>
    <option value='1'>option1</option>
    <option value='2'>option2</option>
    <option value='3'>option3</option>
    <option value='Other'>Other</option>
</select>

$('#visit').on('change', function () {
        if ((this.value) == 'Other') {
            tmp = this;
            $(this).replaceWith($('<input/>',{'type':'text','id':'visit'})); 
        }
});

$(document).keyup(function(e){
    if( $('#visit').length ) {
        if($('#visit').is(":focus") && $("#visit").val().length == 0){
            $("#visit").replaceWith(tmp);
        }
    }
});

$('#visit').keyup(function(e){
    if(e.keyCode == 46 || e.keyCode == 8) {
        alert('box now empty');
    }
});

当文本框变回选择框时，它所有的事件似乎都丢失了。

Should I be somehow reading the event listeners when the select box comes back or should I be saving the select box differently to start with?

Answer 1

事件已被删除，因为您要从 DOM 中删除关联的 Html 元素。您可以同时拥有 select 和 input 并使用 .hide() 和 .show 来可视化正确的元素并且事件会正常进行。

---

另一种方法是使用 event delegation .

更改的 HTML:

<div id="wrapper">
    <select id='visit'>
        <option value='1'>option1</option>
        <option value='2'>option2</option>
        <option value='3'>option3</option>
        <option value='Other'>Other</option>
    </select>
</div>

更改的 JavaScript:

$('#wrapper').on('change', '#visit', function () {
    if ((this.value) == 'Other') {
        tmp = this;
        $(this).replaceWith($('<input/>',{'type':'text','id':'visit'})); 
    }
});

[ ... ]

其余代码保持不变。这是更新的 JsFiddle Demo .