Question

我尝试同时在几个元素上使用EasyAutocomplete 但$(this)总是未定义，为什么？

$("#city_selector_suggest, $city_two, #city_down").easyAutocomplete({
    url: "/templates/rm/js/ecity2.json",

    getValue: function(element) {
        return element.cdek_cityname;
    },

    list: {
        onChooseEvent: function() {
            var selectedItemValue = $(this).getSelectedItemData().cdek_id;
            console.log(selectedItemValue);
        },
        match: {
            enabled: true,

            method:  function(element, phrase) {
                if(element.indexOf(phrase) === 0) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
});

Answer 1

快速测试表明，在EasyAutocomplete事件处理程序中，this是非常规使用的，即＆＃34;不像jQuery那样＆＃34;。

我对jQuery插件的期望是什么：

this指向DOM元素
事件处理程序至少获得一个event参数，可能还有一个data参数。

EasyAutocomplete的作用：

this是小部件的某种配置对象
事件处理程序没有参数

配置对象似乎没有提供任何获取窗口小部件的方法，甚至也不提供窗口小部件所基于的DOM元素。

最接近解决方案的是使用.each()并单独绑定小部件，存储对当前元素的引用。

$("#city_selector_suggest, #city_two, #city_down").each(function () {
    var $self = $(this);

    $self.easyAutocomplete({
        url: "/templates/rm/js/ecity2.json",
        getValue: function(element) {
            return element.cdek_cityname;
        },
        list: {
            onChooseEvent: function() {
                var selectedItemValue = $self.getSelectedItemData().cdek_id;
                console.log(selectedItemValue);
            },
            match: {
                enabled: true,
                method: function(element, phrase) {
                    return element.indexOf(phrase) === 0;
                }
            }
        }
    });
});

不像调用.easyAutocomplete()一样优雅，但也不是完全可怕的。

EasyAutocomplete事件 - $（this）始终未定义

1 个答案: