jQuery .live有时只能工作

时间:2012-09-04 22:39:16

标签: jquery

我有一个文本框和一个DropDownList。 DropDownList根据文本框中的输入填充。我在DropDownList没有正确填充的地方有一些问题。

一种是当我在文本框中输入内容时,我可以选择DropDownList并正确填充它。但是,如果我决定要更改文本框中的内容并在其中键入其他内容,然后尝试再次标记到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();
        }
    });

});

我应该做些什么来改变它?

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

第一件事是.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();
                }
            }
        });
    });
});