Question

好的，我已经搜索了谷歌和整个网站，并没有找到解决方案。

我有一个带按钮的php文件。我在顶部包含所有包含的bootstrap / jquery-ui css文件，在底部包含相应的.js文件。我还有一个自定义.js文件，它有一个定义自定义对话框的函数。当我尝试从php文件中调用它时，我得到：

ReferenceError：$ myDialog未定义。

包含的js文件在dialog.js文件夹中称为js和IS。

这是php和js文件：

＆＃13;

$(function() {
    
    /**
     * $myDialog Custom Dialog Function
     * 
     * Example Usage:
     * 	var theTitle = "CUSTOM TITLE GOES HERE!";
	 *	var msg = 'Your message goes here...';
	 *	$myDialog.dialog("option", "title", theTitle);
	 *	$myDialog.html(msg + '</div>');
	 *	$myDialog.dialog('open');
     *
     * Filename: dialog.js
     **/

    var $myDialog = $('<div id="dialog-message">')
    .dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'center'],
        width: 400,
        
        dialogClass: 'dialog-message ui-dialog-osx',
        title: "Important Message!",
        autoOpen: false,
        show: 'fade',
        hide: 'fade',
        buttons: [
            {
                text: "Ok",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ],        
    });

});

＆＃13;

<?php
?>

<!DOCTYPE html>
	<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
	<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
	<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
	<head>
		<title>Rental Application</title>
		<!-- CSS Styles -->
		<link rel="stylesheet" type="text/css" href="css/html5reset.css" media="all" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all">
		<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" media="all">
		<link rel="stylesheet" type="text/css" href="css/drwebguy.css" media="all" />
	</head>
	
	<body>
		<div id="home" class="container-fluid main_content">
			<div class="row">
				<div class="col-md-4"><a id="btnMyDialog" class="btn btn-primary" role="button">myDialog</a></div>
				<div class="col-md-4">
					<p>This is just some text...</p>
				</div>
				<div class="col-md-4"></div>
			</div><!-- row -->
		</div><!-- class="container-fluid" -->
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery.mask.min.js"></script>
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript" src="js/js.cookie.js"></script>
		<script type="text/javascript" src="js/dialog.js"></script>
		<!--<script type="text/javascript" src="js/drwebguy.js">--></script>
		<script type="text/javascript">
			$(function() {
				
				$('#btnMyDialog').on('click', function(){
					var theTitle = "CUSTOM TITLE GOES HERE!";
					var msg = 'Your message goes here...';
					$myDialog.dialog("option", "title", theTitle);
					$myDialog.html(msg + '</div>');
					$myDialog.dialog('open');
				});
			});
		</script>
	</body>
</html>

＆＃13;

显然，如果我把var函数放在我文件的底部而不是包含一个外部的js文件，它可以正常工作......但是，显然，这也违背了oop的目的：/

Answer 1

使用所有这样的脚本：

(function($) {
   $(document).ready(function(){    
      // .. script what you want
   });
})(jQuery);

未捕获的ReferenceError：未定义变量，但在包含的js文件中定义了IS

1 个答案: