jQuery函数作为对象的属性值答案

【问题标题】：jQuery function as a property value of an objectjQuery函数作为对象的属性值
【发布时间】：2013-04-25 15:38:25
【问题描述】：

我在一个对象中有一个对象，该对象包含一个值为 jQuery 函数的属性：

var fields = {
    id: {},
    timeStarted: {},
    duration: {},
    status: {},
    name: {
        field: $("#companyName"),
        changeEvent: $("#companyName").on("click", function(){
            alert("bazinga!");
        })
    }
};

我还有另一个函数，它遍历fields 中的所有值并尝试注册更改事件：

function registerChangeEvents(){
    $.each(fields, function(field, v){
        $.each(v, function(prop, vv){
            // check which property the loop is on: if changeEvent
            if (prop == "changeEvent"){
                vv();
            }
        });
    });
}

但是，当我运行 registerChangeEvents() 时，控制台返回 Uncaught TypeError: object is not a function。我可以用function(){...} 包装changeEvent 的值，这将使它成为一个可以正常运行的函数。不过，出于某种原因，这似乎不是正确的方法。

如果您有任何想法，请告诉我。

谢谢。

【问题讨论】：

它不是一个函数，它是调用那些 jQuery 函数（原来是一个 jQuery 包装器对象）的结果。将调用包装在匿名函数中是要走的路（除非你想使用$.fn.click.bind($("#companyName"), alert.bind(window, "bazinga!"))）

标签： javascript jquery function object

【解决方案1】：

当你有这个时：

changeEvent: $("#companyName").on("click", function(){
    alert("bazinga!");
})

代码立即执行，.on() 的结果是原来选择的对象……也就是$("#companyName")。所以changeEvent 被设置为一个jQuery 对象，包含id "companyName" 的元素。

我会将name 更改为：

name: {
    field: "#companyName",
    changeEvent: function(){
        alert("bazinga!");
    }
}

然后将您的功能更改为：

function registerChangeEvents(){
    $.each(fields, function(prop, v){
        var field, changeEvent;
        $.each(v, function(propp, vv){
            if (propp === "field") field = vv;
            if (propp === "changeEvent") changeEvent = vv;
        });
        if (field && changeEvent) $(field).on("change", changeEvent);
    });
}

我对一件事感到困惑 - 你称之为“changeEvent”，但你原始代码中的 event 是用于“点击”。

【讨论】：

感谢您的回答。我认为我的第一个建议（在 javascript 函数中包装 changeEvent 值）会是最好的，在这种情况下？另外，我很抱歉之前没有提到这一点，但是registerChangeEvents() 将在某个 ajax 调用之后被解雇。
不同的fields 将有不同的changeEvents，不仅限于clicks，这就是我这么称呼它的原因。例如，我正在使用 Bootstrap 的伪单选按钮，它们不会触发原生更改事件。
调用 registerChangeEvents() 以便我可以为我将通过 Ajax 调用的所有字段设置这些更改事件。

【解决方案2】：

如果您希望注册更改事件，则需要包装点击处理程序附件：

name: {
    field: $("#companyName"),
    changeEvent: function() {
        this.field.on("click", function(){
            alert("bazinga!");
        });
    }
}

然后这样称呼它：

$.each(fields, function(field, v) {
    if ($.isFunction(v.changeEvent)) {
        v.changeEvent();
    }
}

【讨论】：