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

我正在编写一个jQuery插件,应该处理链接上的额外信息以指定开放行为.

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

>< a href =“某处”data-openmode =“NewWindow”class =“openmode”/>
>< a href =“某处”data-openmode =“Modal”class =“openmode”/>
>< a href =“某处”class =“openmode”/> <！ - 未指定 - >

第一个应该在新窗口中打开,第二个在一个模态对话框中打开,第三个应该使用本机行为打开(无论目标在标签上设置).

我想为这个行为创建一个插件,尽可能的通用.我现在写的：

(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文件被加载时设置一次,所以不会采取动态生成的对象.

我应该怎么处理我的要求？

>我试图使用on方法监视加载事件,但这不起作用：

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

我明白这不行,因为“加载”事件不起泡
>我正在考虑修改我的插件,将“on”放在插件中,但是我不喜欢这个想法,因为它在插件中引入了一些超出范围的行为
>我也可以在创建动态节点时调用该插件,但也会将依赖关系引入其他部分.我的插件不会像我想要的一样自主.

有没有人有建议来处理我的要求,保持我的插件尽可能隔离？

这应该适用于IE8和更高版本(最好与其他浏览器)

这里是一个说明问题的jsFiddle(只需点击添加并尝试点击新创建的元素).

解决方法

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

您应该专注于让您的插件提供机制,例如：

(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);

然后允许插件用户注册触发该机制的事件处理程序,必要时使用事件委派：

$(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',function() {
                    $(this).openmode('click');
                });
                break;
 
            case 'off':
                $(document).off('click.openmode','a.openmode');
                break;
        }
     };
})(jQuery);

这样只要打电话：

$.openmode();

将为每个当前(和将来).openmode元素启用插件所需的所有工作.

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

解决方法

猜你在找的jQuery相关文章