javascript - jQuery EasyUI tab 重新加载后dialog功能失效-PHP中文网问答

问题
新开一个tab,操作一个dialog功能正常,确认和取消都正常,关闭tab,重新打开tab,操作dialog,确定和取消功能都不正常了.
代码
打开tab的代码

openTabs = function (path, title) {
    if ($('#home').tabs('exists', title)) {
        $('#home').tabs('select', title);
    } else {
        $('#home').tabs('add', {
            title: title,
            href: path,
            closable: true
        });
    }
}
openTabs('/index.php/PhoneRec/store.html','电话');

打开dialog的代码


 $("#PhoneRec_dialog").dialog({
            title: '编辑',
            width: 700,
            height: 520,
            resizable: true,
            modal:true,
            href: '/index.php/PhoneRec/edit/id/' + id,
            buttons: [{
                text: "修改",
                iconCls: "icon-edit",
                handler: function () {
                    if ($('#PhoneRec_edit').form('validate')) {
                        $.ajax({
                            url: '/index.php/PhoneRec/edit/id/' + id,
                            type: 'post',
                            data: {
                                Customer_Name: $("#PhoneRec_edit input[name='Customer_Name']").val(),
                                Phone_time: $("#PhoneRec_edit input#Phone_time").val(),
                                Copy_Contact: $("#PhoneRec_edit input#Copy_Contact").val(),
                                Tel: $("#PhoneRec_edit input#Tel").val(),
                                Phone_Content: $("#PhoneRec_edit textarea#Phone_Content").val(),
                                PreTail: $("#PhoneRec_edit input[name='PreTail']").val(),
                                Memo: $("#PhoneRec_edit textarea#Memo").val(),
                                Memo_old: $("#PhoneRec_edit textarea#Memo_old").val(),
                                Isgathering: $("#PhoneRec_edit input[name = 'Isgathering']").val(),
                                IsDail: $("#PhoneRec_edit input[name='IsDail']").val(),
                            },
                            beforeSend: function () {
                                $.messager.progress({
                                    text: '正在修改电话记录。。。。'
                                })
                            },
                            success: function (data, response, status) {
                                $.messager.progress('close');
                                if (data == 1) {
                                    $.messager.show({
                                        title: '提示',
                                        msg: '修改记录成功'
                                    });
                                    $("#PhoneRec_dialog").dialog('close');
                                    $('#PhoneRec_data').datagrid('reload');
                                } else {
                                    $.messager.alert('修改记录失败', data, 'warning');
                                }
                            }
                        })
                    }
                }
            }, {
                text: "取消",
                iconCls: "icon-redo",
                handler: function () {
                    $("#PhoneRec_dialog").dialog("close");
                    $("#PhoneRec_edit").form("reset");
                }
            }]
        })

感谢@kikong 的帮助,在他给出的测试代码中,我修改出符合我项目的代码

easyui_tab.html

edit.html

问题发现
在
如果不是js动态加载进去的,而是直接写在html中(edit.html注释的地方)就会出现这种bug,console不会报错,所以一直没调试出来.

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <link rel="stylesheet" type="text/css" href="script/easyui_1_4_4/themes/default/easyui.css"> <script type="text/javascript" src="script/jquery_2_1_3/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="script/easyui_1_4_4/jquery.easyui.min.js"></script> <script> $(function(){ $('#openDialog').on("click",function(){ //JS动态创建 $('body').append('<p id="messageDialog"></p>'); $('#messageDialog').dialog({ width:500, height:500, modal:true, closed: false, cache: false, content:'TEST~~~', buttons: [{ text: "修改", iconCls: "icon-edit", handler: function () { $.messager.progress({ text: '正在修改电话记录。。。。' }); setTimeout(function(){ $.messager.progress('close'); $.messager.show({ title: '提示', msg: '修改记录成功' }); $("#messageDialog").dialog('close'); },2000); } }, { text: "取消", iconCls: "icon-redo", handler: function () { $("#messageDialog").dialog("close"); } }] }); }); var openTabs = function (path, title) { if ($('#home').tabs('exists', title)) { $('#home').tabs('select', title); } else { $('#home').tabs('add', { title:title, content:'1233123', closable:true }); } }; $('#addTab').on("click",function(){ openTabs('/index.php/PhoneRec/store.html','电话'); }); }); </script> </head> <body > <button id="openDialog">openDialog</button> <button id="addTab">add Tab</button> <p class="easyui-tabs" style="width:400px;height:100px;" id="home"> <p title="First Tab" style="padding:10px;"> First Tab </p> <p title="Second Tab" closable="true" style="padding:10px;"> Second Tab </p> <p title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;"> Third Tab </p> </p> </body> </html>