0

我正在创建一个 jquery 插件以在运行时附加事件和事件处理程序：

的HTML：

<table id="digitalInputsTable">
<thead>
    <th>Name</th>
    <th>Value</th>
    <th>State</th>
    <th>Enabled</th>
    <th>Polarity</th>
    <th>Ignore Reset</th>       
</thead>
<tbody>
    <tr>      
        <td>
            <span class="">Name1</span>     
        </td>
        <td>
            <span class="">0</span>
        </td>
        <td>
            <span class="">Normal</span>
        </td>
        <td>
            <input type="checkbox" value="true" class="" jqmon="0" jqreg="0" id="digitalInputsTable_checkbox_03">
        </td>
        <td>
            <select class="" jqmon="0" jqreg="0" id="digitalInputsTable_select_04">
                <option value="0=Alarm">0=Alarm</option>
                <option value="1=Alarm">1=Alarm</option>
            </select>     
        </td>
        <td>          
            <input type="checkbox" value="true" class="" jqmon="0" jqreg="0" id="digitalInputsTable_checkbox_05">       
        </td>
    </tr>
</tbody>

数据结构：

$("#digitalInputsTable").bindEvents({
    parentControl: "digitalInputsTable",
    controls: [
        {   
            id: undefined, 
            name: "checkbox", 
            idStartsWith: "digitalInputsTable_checkbox_",               
            event: "click", 
            callbackHandler: "checkboxCallback"             
        },
        {
            id: undefined,
            name: "checkbox",
            idStartsWith: "digitalInputsTable_checkbox_",
            event: "blur",
            callbackHandler: "blurCallback"
        },
        {
            id: undefined,
            name: "select", 
            idStartsWith: "digitalInputsTable_select_",                 
            event: "change", 
            callbackHandler: "selectCallback"               
        }
    ]   
});

插件：

$.fn.bindEvents = function(options) {           
for(var i = 0; i < options.controls.length; i++) {      
    var control = options.controls[i];
    switch(control.name) {
        case "checkbox":
            control.name = ":checkbox";
            break;          
    }

    if(control.id) {
        // find control by ID.
        // Attach event to the control.
    }
    else if(control.idStartsWith) {         
        $("#" + options.parentControl).find(control.name + "[id^=" + control.idStartsWith + "]")
                                    .bind(control.event, function(e) {                                          
                                        function(ctrl) {                                                
                                            eval(ctrl.callbackHandler + "();");
                                        };                                          
                                    }(control));
    }
};

};

问题：
勾选复选框时，无法调用复选框的“checkboxCallback”回调函数。可能是我错误地使用了闭包。请指教。

4

1 回答 1

1

这不是一个完整的答案，但它应该为您指明正确的方向。基本上，当您循环options.controls并需要在将来对它们执行操作时，您需要使用闭包来分隔它们。

$.fn.bindEvents = function(options) {
    // loop through the controls
    for (var i = 0, control; control = options.controls[i]; ++i) {
        // close over the current item
        (function(ctrl) {
            // you can safely use ctrl now

            // call the callback like so
            ctrl.callbackHandler();
        }(control));
    }
};

顺便说一句，不要eval用来调用回调，只需传递函数引用：

callbackHandler: checkboxCallback

我添加了如何在$.fn.bindEvents函数内部调用它的示例。

于 2012-05-31T10:53:23.650 回答