使用Click事件自定义自定义Jquery插件

时间:2019-06-28 11:24:50

标签: javascript jquery bootstrap-4 jquery-plugins

并没有真正的问题,我只是知道我目前使用的Jquery插件的工作方式不是最有效,所以我希望有人可以指出正确的方向。

因此,这是插件的行为: 1.单击具有特定类的链接(可能有多个具有相同类的链接)时,将选项传递给插件,其中一些是硬编码的,但是一些是从数据属性中收集的。 2.显示了引导程序模态(空白模态)。 3. Ajax发布到外部页面,其中包含功能发布的选项。 5. Ajax成功回调将新的html内容放入要显示的模式中。

这是我当前的jquery插件

(function($){
    $.fn.custom_xedit = function( options ) {

        var settings = $.extend({
        type: this.attr("data-type"),
        selectsource: this.attr("data-selectsource"),
        mask: this.attr("data-mask"),
        title: this.attr("data-title"),
        pk: this.attr("data-pk"),
        posturl: this.attr("data-posturl"),
        originalvalue: this.attr("data-originalvalue"),
        name: this.attr("data-name")
        }, options );

        this.addClass('xedit___el___active');

        $('#xedit_modal').modal({
            backdrop: 'static',
            keyboard: false
        });

        $.ajax({
            type: 'POST',
            url: 'url',
            data: { 
                'type': settings.type,
                'selectsource': settings.selectsource,
                'mask': settings.mask,
                'title': settings.title,
                'pk': settings.pk,
                'posturl': settings.posturl,
                'originalvalue': settings.originalvalue,
                'name': settings.name
            },
            success: function(callback_modal){
                $("#xedit_modal").html(callback_modal);
            }
        });
    }; 
}( jQuery ));

我目前的称呼是:

$('body').on("click", ".some_class", function () {
    $(this).custom_xedit({
        type: "input_mask",
        mask: "999",
        title: "Internal extension",
        posturl: "some_url",
        name: "Ext"
    });
});

能够在不单击的情况下调用它而很好地调用它,但不知道如何做到这一点(如下所示:)

$(.some_class).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});

0 个答案:

没有答案