在庫加載之前調用jquery函數的腳本

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] has no method 'jConfirmAction'

我試圖把在同一個JSP的功能代碼，<script type="text/javascript"></script>之間解決這一問題。這適用於某些頁面，但在其他頁面中有相同的錯誤。有沒有辦法只有在jquery已經加載的情況下調用函數？

Answer 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'進行比較