第一次单击时未捕获MVC3和JQuery AJAX更改事件

我正在使用Razor语法开发一个MVC3应用程序，我在使用AJAX时遇到了一些问题

问题如下： 我有一个类别的下拉列表，定义如下：

 @Html.DropDownList("category_1", 
                 new   SelectList(LocalRuckusMVC.Code.StaticDictionaries.BusinessCategories,                                      
   "Value", "Text"), "Please Select A Category")

当用户选择一个类别时，应用程序向服务器发出AJAX请求，以获取所选类别的适当子类别列表

jquery的设置如下：

$('#category_1').change(function () {
    $('#category_1').cascade({
        url: '@Url.Action("GetSubCats")',
        paramName: 'category_id',
        childSelect: $("#subCategory_1")
    });
});

和级联jquery扩展：

    (function (jQuery) {
    $.fn.cascade = function (options) {
        var defaults = {};
        var opts = $.extend(defaults, options);

        return this.each(function () {
            jQuery(this).change(function () {
                var selectedValue = jQuery(this).val();
                var params = {};
                params[opts.paramName] = selectedValue;
                jQuery.getJSON(opts.url, params, function (items) {
                    var options = opts.childSelect.options;

                    opts.childSelect.empty();
                    window.console.log(params);
                    window.console.log(items);
                    jQuery.each(items, function (index, item) {
                        //window.console.log(index);
                        window.console.log(opts.childSelect);
                        window.console.log(item.Value);

                        var html = '<option value=\'' + item.Value + '\' >' + item.Text +    
                                     '</option>';
                        opts.childSelect.append(html);
                        window.console.log(html);


                    });
                });
            });
        });
    };
})(jQuery);

就AJAX而言，一切都很好，我得到了正确的响应，问题是在发出AJAX请求之前，用户必须两次选择不同的类别

我已经对firebug和fiddler进行了广泛的调试，在第一次选择类别时不会触发更改事件，或者至少在查看firebug或chrome开发控制台时不会触发更改事件

有人有什么想法吗

非常感谢您的帮助

Oops忘记添加此jquery方法更新的html select，因此如下所示：

 <select id="subCategory_1" name="subCategory_1">
                </select>

---

啊哈，我认为这是因为在现有更改事件的基础上定义了另一个jQuerythis.change事件

这是原始更改事件

$('#category_1').change(function () {

然后在helper函数中

jQuery(this).change(function () {

var options = opts.childSelect.options;

我认为这是肯定的；仅当以下代码已更改且select未再次更改以触发该更改时，才运行该代码

试试下面的修订版

$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
            var selectedValue = jQuery(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            jQuery.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                window.console.log(params);
                window.console.log(items);
                jQuery.each(items, function (index, item) {
                    //window.console.log(index);
                    window.console.log(opts.childSelect);
                    window.console.log(item.Value);

                    var html = '<option value=\'' + item.Value + '\' >' + item.Text +
                                     '</option>';
                    opts.childSelect.append(html);
                    window.console.log(html);
                });
            });

    });
};

---

这与functionoptions同名，并且变量未使用！！所以我把它拿了出来：-我已经测试了它，它在first select上对我有效，希望它有帮助。

感谢您的快速响应，它现在工作得非常好。将其标记为答案，将+1但我还没有代表：。