Question

如果选择了某个选项，我有一些javascript可以将选择框更改为文本框，如果用户点击删除/退格到他们清除文本的位置，则将该文本框更改回选择框框。

<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');
    }
});

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

当我选择框回来时，我应该以某种方式阅读事件监听器，还是应该以不同的方式保存选择框？

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。

Answer 2

从DOM中删除元素后，其所有处理程序也都消失了一种解决方案是始终保留元素，但只是将其隐藏在用户的视图中。

$('select[name=visit]').on('change', function () {
    if (this.value == 'Other') {
      $(this).addClass('hide');
      $('input.hide').removeClass('hide');
    }
});

$(document).keyup(function (e) {
    var $elem = $('input[name=visit]');
    if ($elem.length) {
        if ($elem.is(":focus") && $elem.val().length == 0) {
            $elem.addClass('hide');
            $("select[name=visit]").removeClass('hide');
        }
    }
});

$('input[name=visit]').keyup(function (e) {
    if (e.keyCode == 46 || e.keyCode == 8) {
        alert('box now empty');
    }
});

.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="visit">
    <option value='1'>option1</option>
    <option value='2'>option2</option>
    <option value='3'>option3</option>
    <option value='Other'>Other</option>
</select>
<input type="text" name="visit" class="hide" />

此外，由于只有一个元素具有唯一id，因此我始终避免在动态HTML中使用id属性。

第二种解决方案
添加父div包装器并将处理程序附加到它，如下所示：

$('#wrapper').on('change', '#visit', 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');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>

JSFIDDLE

用先前保存的元素替换元素（选择框）

2 个答案: