Bootbox + JQuery datepicker를 사용할 때 입력 상자를 클릭하면 div 레이어가 적용되지 않지만 날짜 표시 이벤트가 전혀 트리거되지 않고 오류 메시지가 없음을 발견했습니다.
상황은 다음과 같습니다. 1.
html 코드 :
이것은 팝업 레이어입니다.
<div id="formDiv" class="form-group form">
<form id="addForm" class="cmxform">
<div class="form-table">
<div class="form-row">
<label>user_name</label> <input id="username" name="username"
type="text" class="form-control form-input" placeholder="name" />
</div>
<div class="form-row">
<label>user_gender</label> <input id="male" type="radio"
value="male" name="userGender" required>male <input
id="female" type="radio" value="female" name="userGender">female
<label for="userGender" class="error"></label>
</div>
<div class="form-row">
<label>user_email</label> <input id="userEmail" name="userEmail"
type="email" class="form-control form-input"
placeholder="user_email" />
</div>
<div class="form-row">
<label>user_phone</label> <input id="userPhone" name="userPhone"
type="text" class="form-control form-input"
placeholder="user_phone" />
</div>
<div class="form-row">
<label>user_address</label> <input id="userAddress"
name="userAddress" type="text" class="form-control form-input"
placeholder="user_address" />
</div>
<div class="form-row">
<label>user_birthday</label> <input name="userBirthday" type="text"
class="form-control datepicker" />
</div>
<div class="form-row">
<label>role_name</label> <select class="form-control form-select"
id="roleName">
<option value="1">总经理</option>
<option value="2">副总经理</option>
<option value="3">组长</option>
<option value="4">普通员工</option>
</select>
</div>
<div class="form-row">
<label>departemnt_name</label> <select
class="form-control form-select" id="departemntName">
<option value="1">研发</option>
<option value="2">IT部</option>
<option value="3">HR</option>
<option value="4">销售</option>
</select>
</div>
</div>
</form>
</div>
2. JS 코드 :
부트 박스를 사용하여 팝업 레이어의 정보를 사용자 지정합니다. 다음은이 양식입니다.
function addUser() {
bootbox.confirm({
message:$("#formDiv").html(),
title:"Add new user",
buttons:{
confirm:{label:"Yes"},
cancel:{label:"No"}
},
callback:function(result){
if(result) {
console.log("You have clicked yes");
}
}
});
}
3. 그림과 같이 인터페이스 :
user_birthday 아래의 입력 상자를 클릭해도 응답이 전혀 없음을 발견했습니다.
정보를 검색 한 후 비슷한 문제에 대한 해결책을 찾았습니다.
여기
를 클릭 하여이를 기준으로 수정하면 나중에 문제가 해결됩니다.
방법은 다음과 같습니다.
1. JS 코드 :
function addUser() {
bootbox.confirm({
message:bootBoxContent(),
title:"Add new user",
buttons:{
confirm:{label:"Yes"},
cancel:{label:"No"}
},
callback:function(result){
if(result) {
console.log("You have clicked yes");
}
}
});
}
//添加这个方法取代$("#formDiv").html()
function bootBoxContent() {
var content = $("#formDiv").clone();
//因为在css代码做了隐藏,这里需要显示出来
$(content).show();
//不能使用id选择器,因为clone的原因,会出现2个相同的id,导致datepicker插件不识别报错,所以用类选择器
content.find(".datepicker").datepicker();
return content;
}
2. 결과 : 클릭 후 시간 프레임이 나타나는 것을 볼 수 있습니다.