如何从 html 属性值附加小部件？

Question

我想要执行以下操作：

1. 声明适用的小部件，例如这样： $.fn.myWidget = function(options) { ... }
2. 在 html 中定义要应用于该元素的小部件：
   some text

如果我不动态插入代码，实现这样的事情几乎是微不足道的：

$(function() {
  $('*[widget]').each(function() { $(this)[$(this).attr('widget')]() })
})

但是当代码动态插入时（例如从 AJAX ）， 我们需要也遍历该新代码。所以有两个问题：

1. 是否有插件、库或其他东西可以解决我更广泛的问题（ei 从 html 属性获取小部件名称并初始化该元素的小部件）？
2. 当 jQuery 动态插入 html 元素（使用 .html()、.prepend()、.load() 等）时，是否有一些功能允许处理（挂钩）情况？

更新：更多详细信息

部分可以使用以下方法解决问题：

$.fn.applyWidgets = function() {
  this.each(function() {
    var $e = $(element);
    var widget = $e.attr('widget');
    if(widget) $e[widget]();
  });
}

$.fn.htmlWithWidgets = function(html) { 
  this.html($(html).applyWidgets());
}

然后使用 $(selector).htmlWithWidgets(html) 而不是 $(selector) .html(html)

尽管如此，学习如何拦截 html() 和类似的调用并“从内部”隐式应用该方法还是很有趣的。

Answer 1

最后我得到了以下解决方案：

  var _widget_bindings = {}

  // registers css_class and associates with widget_initializer callback
  function bind_widget(css_class, widget_initializer) {
    if (jQuery.fn[css_class]) throw "widget with name "+css_class+"already defined";
    _widget_bindings[css_class] = widget_initializer;
    jQuery.fn[css_class] = widget_initializer;
  }

  // for each element in set takes DOM subtree and for each element in the subtree with registered css_class
  // invokes corresponding widget_initializer
  jQuery.fn.init_widgets = function() {
    this.find('*[class]').andSelf().each(function() {
      if (!this.className) return;
      var classes = this.className.split(/\s+/);
      for (var i = 0, l = classes.length; i < l; i++) {
        var css_class = classes[i];
        if (css_class && _widget_bindings.hasOwnProperty(css_class))
          _widget_bindings[css_class].apply(jQuery(this));
      }
    })
    return this;
  }

  // invokes a method (can be .html(), .append(), .prepend(), .before(), .after()) by given method_name
  // and initializes widgets for newly created elements
  jQuery.fn.with_widgets = function(method_name, elements) {
    var j_elements = jQuery(elements);
    this[method_name](j_elements);
    j_elements.init_widgets();
    return this;
  }

  jQuery(document).ready(function() { (document.body).init_widgets() })