0

Jquery 関数に問題があります。

Google から 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>

しかし、コンソールに次のエラーがあります。

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にメソッド 'jConfirmAction' がありません

関数コードを同じ jsp の間に入れて、これを修正しようとしました<script type="text/javascript"></script>。一部のページでは機能しますが、他のページでは同じエラーが発生します。jqueryがロードされている場合にのみ関数を呼び出す方法はありますか?

4

1 に答える 1

1

JS コード全体を document.ready() でラップする

$(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' と比較します

于 2013-03-05T22:08:32.827 に答える