div替换后回调没有触发

Question

一旦我互相替换div，事件就不会被解雇。这是我的小提琴链接

https://jsfiddle.net/vikuseth/dfzfmpvj/2/

这是我的html文件

<div id="divSelectCommType">
    <label>CommunicatorType</label>
    <select id="selectCommType" class="form-control disabled">
        <option value="1">cellularEthernet</option>
        <option value="2">WiFi</option>
    </select>
</div>
<div>
    <div class="hidden" id="AddWiFiCommDetails">
       <button id="btnSave">Save</button>
    </div>
    <div class="hidden" id ="AddGSMCommDetails">
        <button id="btnCancel">cancel</button>
     </div>
</div>

我的JS文件

 $(document).ready(function () {

        $("#btnSave").click(
            function () {
                AlertSave();
            }            
        );
     $("#btnCancel").click(
            function () {
                AlertCancel();
            }            
        );
     $("#selectCommType").change(
            function () {
                Typechange();
            }            
        );
    });
function AlertCancel() {
   alert("cancel clcik");
}
function AlertSave() {
   alert("save click");
}
function Typechange() {
   alert("Type changed");
     var val = $("#selectCommType option:selected").val();   //drop down 
       if (val == 1) {
           var div1 = $('#AddGSMCommDetails');
           var div2 = $('#AddWiFiCommDetails');

           tdiv1 = div1.clone();
           tdiv2 = div2.clone();

           div1.replaceWith(tdiv2);
           div2.replaceWith(tdiv1);
       }
       else {                      
           var div1 = $('#AddGSMCommDetails');
           var div2 = $('#AddWiFiCommDetails');

           tdiv1 = div1.clone();
           tdiv2 = div2.clone();

           div1.replaceWith(tdiv2);
           div2.replaceWith(tdiv1);
            }
}

Answer 1

使用clone(true)也可以克隆事件。请参阅updated jsFiddle。

tdiv1 = div1.clone(true);
tdiv2 = div2.clone(true);