jQuery .live 有时只能工作

Question

我有一个文本框和一个 DropDownList。 DropDownList 是根据文本框中的输入填充的。我遇到了一些问题，DropDownList 没有正确填充。

一个是当我在文本框中输入一些内容时，我可以选择到 DropDownList 并正确填充它。但是，如果我决定要更改文本框中的内容并在其中键入其他内容，然后尝试再次使用 Tab 键切换到 DropDownList，它不会更新。

另一个问题是，当我开始在文本框中输入内容时，我会弹出一个自动完成列表，我可以单击一个选项让它为我填充文本框，但是当我这样做时，DropDownList 没有被填充。

这是我必须填充 DropDownList 的 javascript。

$('#textFrame').live('change', function (event) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetDirectors", "HostScan")',
        data: { frame: $(this).val() },
        success: function (data) {
            var markup = '';
            for (var x = 0; x < data.length; x++) {
                markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
            }
            $('#DirectorList').html(markup).show();
        }
    });

});

我应该改变什么来完成这项工作？

提前感谢您的帮助！

Answer 1

第一件事是 .live 从 jQuery 1.7.0 开始被弃用。尝试改用 .on。

第二次使用google cdn托管的jquery文件。这将有助于减少您网站的带宽。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

对于代码，请在添加新值之前尝试清除选项。这样可以确保您不会在之前的选项中添加新选项。

$(function(){

    $('#textFrame').on('change', function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetDirectors", "HostScan")',
            data: { frame: $(this).val() },
            success: function (data) {
                if(data != null){
                var markup = '';
                $('#DirectorList').find('option').remove();
                    for (var x = 0; x < data.length; x++) {
                        markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
                    }
                $('#DirectorList').append(markup).show();
                }
            }
        });
    });
});