jQuery 插件也适用于动态创建的元素

我正在编写一个 jquery 插件，它应该处理链接上的额外信息以指定打开行为。

例如，我想支持如下标记：

1. <a href="somewhere" data-openmode="NewWindow" class="openmode" />
2. <a href="somewhere" data-openmode="Modal" class="openmode" />
3. <a href="somewhere" class="openmode" /> <!-- Not specified -->

第一个应该在新窗口中打开，第二个应该在模式对话框中打开，第三个应该以本机行为打开（无论标签上设置了什么目标）。

我想为这种行为创建一个尽可能通用的插件。我现在已经写了：

(function ($) {
    $.fn.myOpenMode = function () {
        return this.mousedown(function () {
            var $this = $(this);

            var mode = $this.data("openmode");
            var href = this.href;
            var handled = true;
            if (mode) {
                switch (mode) {
                    case "NewWindow":
                    case "1":
                        window.open(href, "_blank");
                        break;
                    case "Dialog":
                    case "2":
                        openAsDialog(href);
                        break;

                    // Actually, there are other options, but I removed them for clarity

                    default:
                        handled = false;
                }
            }
            else {
                handled = false;
            }
            return !handled;
        });
    };
})(jQuery);

这段代码允许我从任何页面调用，例如：

$(function(){
    $(".openmode").myOpenMode();
});

这适用于静态生成的标签。但是，我的应用程序可能会动态生成标记（大多数时候使用 jsRender，但这并不重要）。

但由于此行为是在加载 javascript 文件时设置一次，因此它不会采用动态生成的对象。

我应该怎么做才能满足我的要求？

1. 我尝试使用on方法来监视加载事件，但这不起作用：

   $(function(){
       $(document).on("load",".openmode", function() { $(this).myOpenMode(); });
   });
   

   我知道这不起作用，因为“加载”事件不会冒泡

2. 我正在考虑修改我的插件以将“on”放入插件中，但我不喜欢这个想法，因为它在插件中引入了一些超出范围的行为

3. 我还可以在每次创建动态节点时调用该插件，但它也会将依赖关系引入到其他部分。我的插件不会像我希望的那样自治。

有谁有建议来处理我的要求，使我的插件尽可能隔离？

[edit]这应该适用于 IE8 及更高版本（最好适用于其他浏览器）

[edit]这里有一个jsFiddle说明问题（只需单击Add并尝试单击新创建的元素）。

插件添加到$.fn应仅适用于列出的元素，而不适用于任何未来的元素。

你应该集中精力让你的插件提供机制, e.g.:

(function($) {

    $.fn.openmode = function(cmd) {
        cmd = cmd || 'on';

        switch (cmd) {

            case 'click':
                // read props, open windows, etc
                break;

            case 'on':
                this.addClass('openmode');
                break;

            case 'off':
                this.removeClass('openmode');
                break;
         }
    });

})(jQuery);

然后允许插件用户注册事件处理程序triggers该机制，必要时使用事件委托：

$(document).on('click', 'a.openmode', function() {
    $(this).openmode('click');
});

后面的代码也可以作为实用函数放入 jQuery 命名空间中：

(function($) {
    $.openmode = function(cmd) {
        cmd = cmd || 'on';

        switch (cmd) {

            case 'on':
                $(document).on('click.openmode', 'a.openmode', function() {
                    $(this).openmode('click');
                });
                break;

            case 'off':
                $(document).off('click.openmode', 'a.openmode');
                break;
        }
     };
})(jQuery);

这样只需调用：

$.openmode();

将完成为每个当前（和未来）启用插件所需的所有工作.openmode元素。