Question

我遇到了Jquery函数的问题。

我从谷歌获得了jquery库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

首先，我将以下代码放在.js

上

(function($){
jQuery.fn.jConfirmAction = function (options) {
    var theOptions = jQuery.extend ({
        question: "Are You Sure ?",
        yesAnswer: "Yes",
        cancelAnswer: "Cancel"
    }, options);

    return this.each (function () {

        $(this).bind('click', function(e) {
            var submitBtn = $(this);
            if($(this).attr("jconfirmed")){
                submitBtn.removeAttr("jconfirmed");
            }else{
                e.preventDefault();
                thisHref = $(this).attr('href');

                var btns = {};
                btns[theOptions.yesAnswer]=function() {                                                         
                        $( this ).dialog( "close" );                                    
                        if (thisHref!=null){
                                window.location = thisHref;
                        }else{
                                submitBtn.attr("jconfirmed", true);
                                submitBtn.click();
                        }
                };

                btns[theOptions.cancelAnswer]=function() {                                                              
                    $( this ).dialog( "close" );                                    
                    submitBtn.removeAttr("jconfirmed");
                };

                var content='<p>'+theOptions.question+'</p>';
                if(theOptions.checkboxText!=undefined){
                        content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
                }

                $('#dialog-confirm').html(content);
                $('#cbox').click(function() {
                    /*
                    if($('#cbox').attr("checked")){
                            $('.ui-dialog-buttonset button:first-child').show();
                    }else{
                            $('.ui-dialog-buttonset button:first-child').hide();
                    }
                    */
                });

                $('#dialog-confirm').dialog({
                    resizable: false,
                    modal: true,
                    buttons: btns,
                    show: {
                        effect: "blind",
                        duration: 1000
                      },

                    hide: {
                          effect: "explode",
                          duration: 1000
                    }, 
                    draggable: false,
                    dialogClass: 'main-dialog-class'
                });
            }   
        });

    });
};
})(jQuery);

并且，在jsp文件中调用函数。

<script type="text/javascript">
$(document).ready(function() {
    $('.confirm').jConfirmAction();
});
</script>

但我在控制台中出现以下错误：

Uncaught TypeError：Object [object Object]没有方法'jConfirmAction'

我尝试通过将函数代码放在<script type="text/javascript"></script>之间的同一个jsp中来解决这个问题。这适用于某些页面，但在其他页面中具有相同的错误。有没有办法只在加载了jquery时调用该函数？

Answer 1

使用document.ready（）

包装整个JS代码

$(document).ready(function () {
    (function ($) {
        jQuery.fn.jConfirmAction = function (options) {
            var theOptions = jQuery.extend({
                question: "Are You Sure ?",
                yesAnswer: "Yes",
                cancelAnswer: "Cancel"
            }, options);

            return this.each(function () {

                $(this).bind('click', function (e) {
                    var submitBtn = $(this);
                    if ($(this).attr("jconfirmed")) {
                        submitBtn.removeAttr("jconfirmed");
                    } else {
                        e.preventDefault();
                        thisHref = $(this).attr('href');

                        var btns = {};
                        btns[theOptions.yesAnswer] = function () {
                            $(this).dialog("close");
                            if (thisHref !== null) {
                                window.location = thisHref;
                            } else {
                                submitBtn.attr("jconfirmed", true);
                                submitBtn.click();
                            }
                        };

                        btns[theOptions.cancelAnswer] = function () {
                            $(this).dialog("close");
                            submitBtn.removeAttr("jconfirmed");
                        };

                        var content = '<p>' + theOptions.question + '</p>';
                        if (theOptions.checkboxText !== undefined) {
                            content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
                        }

                        $('#dialog-confirm').html(content);
                        $('#cbox').click(function () {
                            /*
                        if($('#cbox').attr("checked")){
                                $('.ui-dialog-buttonset button:first-child').show();
                        }else{
                                $('.ui-dialog-buttonset button:first-child').hide();
                        }
                        */
                        });

                        $('#dialog-confirm').dialog({
                            resizable: false,
                            modal: true,
                            buttons: btns,
                            show: {
                                effect: "blind",
                                duration: 1000
                            },

                            hide: {
                                effect: "explode",
                                duration: 1000
                            },
                            draggable: false,
                            dialogClass: 'main-dialog-class'
                        });
                    }
                });

            });
        };
    })(jQuery);
});

在文件末尾包含所有JS文件，然后重试，并注意一下？使用'！=='将变量与'null'和'undefined'进行比较

在库加载之前调用jquery函数的脚本

1 个答案: