jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”
Posted
技术标签:
【中文标题】jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”【英文标题】：jquery-ui.js:8056 Uncaught TypeError: Cannot read property 'left' of undefined 【发布时间】：2021-07-04 21:49:50 【问题描述】：我不知道为什么我的注册页面出现这些错误
jquery-ui.js:8056 Uncaught TypeError: Cannot read property 'left' of undefined
一些代码
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
<script type="text/javascript">
$("#babyDob").click(function()
$('#datePickerInput').datepicker('show');
$("#datePickerInput").datepicker(
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function()
var dateSelected = $(this).datepicker('getDate');
// dateSelected = moment(dateSelected).format('YYYY-MM-DD');
console.log("dateSelected",dateSelected);
);
);
</script>
全部代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Bunlong Heng">
<meta name="csrf-token" value=" csrf_token() ">
<title>Sign Up</title>
<link id="favicon" rel="shortcut icon" href="/assets/fe/img/favicon/local/favicon-prod.png" type="image/x-icon" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
@include('layouts.be.baby.styles.datePicker')
<style type="text/css">
.form
margin-top: 200px;
color: black;
z-index: 2;
.btn, .form-control
border-radius: 0px;
border: solid 1px black;
color: black;
.sign-up-section
font-weight: thin !important;
body
overflow: hidden;
</style>
</head>
<body>
<div class="container ">
<div class="row ">
<p style="font-size: 1500px; color: black; z-index: 1; position: absolute; top: 0; right: 0; ">MY</p>
<div class="col-sm-4 "></div>
<div class="col-sm-4 form text-center">
<img src="https://i.imgur.com/XCVhEh4.png">
!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'baby/store','files' => true)) !!
-- Name --
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<input type="text" value="Request::old('name')" value="" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
-- Email --
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input name="email" type="email" value="" class="form-control" placeholder="Email">
</div>
</div>
-- babyName --
<div class="form-group">
<label for="babyName" class="col-sm-4 control-label">babyName</label>
<div class="col-sm-8">
<input type="text" value="Request::old('babyName')" value="" name="babyName" class="form-control" id="babyName" placeholder="babyName">
</div>
</div>
-- babyDob --
<div class="form-group">
<label for="babyDob" class="col-sm-4 control-label">babyDob</label>
<div class="col-sm-8">
<input type="text" value="Request::old('babyDob')" value="" name="babyDob" class="form-control" id="babyDob" placeholder="babyDob">
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
</div>
</div>
-- adminCode --
<div class="form-group">
<label for="adminCode" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input type="text" value="Request::old('adminCode')" value="" name="adminCode" class="form-control" id="adminCode" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<a class="btn btn-default" href="/baby/signup"> Cancel </a>
<button type="submit" id="submit" class="btn btn-default">Next</button>
</div>
</div>
!!Form::close()!!
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#babyDob").click(function()
$('#datePickerInput').datepicker('show');
$("#datePickerInput").datepicker(
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function()
var dateSelected = $(this).datepicker('getDate');
// dateSelected = moment(dateSelected).format('YYYY-MM-DD');
console.log("dateSelected",dateSelected);
);
);
</script>
</body>
</html>
【问题讨论】：
怀疑你必须定义 .首先启动您的 DatePicker，然后调用show
【参考方案1】：
考虑以下示例。
$(function()
$('#datePickerInput').datepicker('show');
);<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">这会引发类似的错误：
Uncaught TypeError: inst is undefined
您必须先初始化 Datepicker，然后调用 show 选项。像这样：
$(function()
$("#datePickerInput").datepicker(
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function()
var dateSelected = $(this).datepicker('getDate');
console.log("dateSelected", dateSelected);
);
$('#datePickerInput').datepicker('show');
);<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">【讨论】：
以上是关于jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取未定义的属性 toLowerCase
JQuery：未捕获的类型错误：无法读取未定义的属性“调用”