Question

我正在尝试修复small jQuery plugin，将HTML复选框转换为图形复选框。我面临的问题是，如果我更改＆＃34;已检查＆＃34;复选框上的属性，change事件未被触发，因此图形重新定位不会更新。

显然，我可以在更改属性时手动触发更改事件，但我想找到一个包含在插件中的更通用的解决方案。

搜索周围，我找到了this answer，它指向了propHooks，我可以使用它来获取属性设置时的通知。所以我可以这样写：

jQuery.propHooks.checked = {
    set: function (el, value) {
        el.checked = value;
        $(el).trigger('change');
    }
};

现在，只要属性设置，就会触发更改事件。

我担心的是，这不是很本地化。现在我已经改变了jQuery对页面上所有内容的行为方式，只是为了这个小插件。此外，如果页面上的两个插件碰巧使用相同的技术，我不确定会发生什么。事件会被触发两次，还是第二次钩子会覆盖第一次？这两种行为似乎都有问题。

我很难找到任何关于propHooks的文档。使用它的正确方法是什么？

Answer 1

SIGH。

我希望有人能够了解propHooks运作方式背后的原因。无论如何，这是我为限制propHooks对插件的影响所做的。

我在插件中添加了以下代码：

var $elements = $();

$.fn.ezmark = function(options) {
    ...
    return this.each(function() {
        ... // plugin code

        // Make a list of all elements that the plugin was applied to
        $elements = $elements.add(this);
    });
}

然后在propHooks代码中，我检查了有问题的元素是否在列表中，如下所示：

$.propHooks.checked = {
    set: function (el, value) {
        if ($elements.filter(el).length !== 0) {
            el.checked = value;
            $(el).trigger('change');
        }
    }
};

这远非完美。我可能会通过不触发事件来使其更加突兀，而只是调用插件处理程序进行状态更改。

Answer 2

我正在处理类似的插件并遇到过这个问题。

我正在使用的许多预先存在的代码都希望更改事件来自用户交互仅，因此触发＆＃34;更改＆＃34;当复选框以编程方式选中/取消选中时，会导致其他事件无法触发（这些其他处理程序只应在用户更改值时运行）。< / p>

我解决的解决方案是将我的icon-update-handler绑定到＆＃34;更改＆＃34;事件，和我调用的自定义事件＆＃34; updateicon＆＃34;。然后，在propHooks.checked.set（）中，我触发了这个＆＃34; updateicon＆＃34;只有当选中/取消选中的元素具有我的插件用于查找和绑定这些＆＃34;图标化的＆＃34;输入/复选框元素。

jQuery.propHooks.checked = {
    set: function (el, value) {
        el.checked = value;
        var jqEl = $(el);
        if(jqEl.is(".iconified")) jqEl.trigger('updateicon');
    }
};

Answer 3

此代码不会影响原生复选框的默认行为。

 jQuery.propHooks.checked = {
   get: function (el) {
     if $(el).is(':checkbox') {
       return null;                // should not return undefined, return null.
     }
     // do something
   },
   set: function (el, value) {
     if $(el).is(':checkbox') {
       return undefined;           // should not return null, return undefined.
     }
     // do something
   }
 };

相关代码：https://github.com/jquery/jquery/blob/master/src/attributes.js#L400-L409

如何以不引人注目的方式使用propHooks？

3 个答案: