检测 Edge 中输入字段的变化

Question

我有一个包含仪式列表的数据列表，当一个被 selected 时，它应该在 jquery 中触发一个更改事件，然后会生成一个带有模板选项的新数据列表。这在 Chrome 中确实有效，但在 Edge 中，我可以 select 列表中的一个项目，然后什么也没有发生。

<label>Select a document type:</label><input list="doc" id="document" name="Document" />
                    <datalist id="doc" name="Doc" placeholder="Please select a document type">
                        @foreach (var item in Model.tribType)
                        {
                            <option id="@item.TributeTypeID" value="@item.TributeTypeName"></option>
                        }
                    </datalist>
<label>Select a tribute type:</label><input list="tribute" id="tributeSelected" name="Tribute" />
                    <datalist id="tribute"></datalist>

 $(document).ready(function () {
        $('#document').change(function () {
            document.getElementById("tributeSelected").value = "";
            var x = $("#doc option[value='" + $('#document').val() + "']").attr('id');

            var trib = @Html.Raw(Json.Encode(Model.tribute));
            var data = JSON.parse(JSON.stringify(trib));
            var result = [];
            var search = "TributeTypeID";
            for (var i = 0; i < data.length; i++) {
                if (data[i][search] == x) {
                    result.push(data[i].TributeName);
                }
            }

            //console.log(x);
            //console.log(result);

            var options = '';
            for (var i = 0; i < result.length; i++) {
                options += '<option value="' + result[i] + '"></option>';
                //console.log(result[i]);
            }
            document.getElementById('tribute').innerHTML = options;

            //const test = Selected;
            //console.log(test);

        });
    });

Answer 1

您应该绑定到 input event instead of change event (which is fired when a new option has been selected and focus is given to another element). As said in the doc，change 事件不一定会在每次更改元素值时触发。

使用如下 input 事件：

$('#document').on('input', function () {...});

例如：

$(document).ready(function () {
            $('#document').on('input', function () {
                console.log("changed");
                document.getElementById("tributeSelected").value = "";
                var x = $("#doc option[value='" + $('#document').val() + "']").attr('id');
                var data = JSON.parse('[{"TributeTypeID":"TributeTypeID1", "TributeName":"TributeTypeName1"},{"TributeTypeID":"TributeTypeID4", "TributeName":"TributeTypeName4"}]');
                var result = [];
                var search = "TributeTypeID";
                for (var i = 0; i < data.length; i++) {
                    if (data[i][search] == x) {
                        result.push(data[i].TributeName);
                    }
                }
                var options = '';
                for (var i = 0; i < result.length; i++) {
                    options += '<option value="' + result[i] + '"></option>';
                }
                document.getElementById('tribute').innerHTML = options;
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>Select a document type:</label><input list="doc" id="document" name="Document" />
<datalist id="doc" name="Doc" placeholder="Please select a document type">
        <option id="TributeTypeID1" value="TributeTypeName1"></option>
        <option id="TributeTypeID2" value="TributeTypeName2"></option>
        <option id="TributeTypeID3" value="TributeTypeName3"></option>
        <option id="TributeTypeID4" value="TributeTypeName4"></option>
    </datalist>
<label>Select a tribute type:</label><input list="tribute" id="tributeSelected" name="Tribute" />
<datalist id="tribute"></datalist>

检测 Edge 中输入字段的变化

Detecting change in input field in Edge

html

jquery

microsoft-edge