Bootbox + JQuery UI Datepicker 시간 입력 상자가 응답을 클릭하지 않음

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. 결과 : 클릭 후 시간 프레임이 나타나는 것을 볼 수 있습니다.

추천

출처blog.csdn.net/u010857795/article/details/71512042