Jquery - 回发 Ajax 后重新打开对话框答案

【问题标题】：Jquery - Re-Open Dialog after Postback AjaxJquery - 回发 Ajax 后重新打开对话框
【发布时间】：2012-05-21 06:31:26
【问题描述】：

我有要删除的列表，当用户单击它时，它会显示带有“确认”和“取消”按钮的 jquery ui 对话框

当用户点击“确认”时，它会调用ajax函数并给它回发

然后我想关闭对话框，所以我使用了命令$(this).dialog("close"); 它按预期工作。

但是现在当我删除另一个列表时，UI 对话框不会出现。

我该如何解决这个问题？

$("#dialog").dialog({
                modal: true,
                bgiframe: true,
                width: 300,
                height: 150,
                resizable: false,
                autoOpen: false
            });


            function submit_delete(y,z){ //kirim data lewat ajax

                $.ajax({
                    type: 'POST',
                    url: 'delete_page.php',
                    data: {fte:y,tipe:z},
                    success: function(data) {
                        if(z==1){
                            var divv= '#container_table1';
                        }  else if(z==2){
                            var divv= '#container_table2';
                        }   else if(z==3){
                            var divv= '#container_table3';
                        }   

                        $(divv).html(data);//window.setTimeout(function(){location.reload()},3000)
                         $('#dialog').dialog('close');
                    }
                })
                return true;
            }
            //end submit ajax onclick training



            $(".c_del1").click(function(){
                var cc= ($(this).next().val());
                var c=cc.split('#')
                alert(cc);
                $("#dialog").text('Do You Want to Delete '+c[1]+"?");

                var yy = $(this).prop('id');


                $("#dialog").dialog('option', 'buttons', {
                    "Confirm" : function() {

                        submit_delete(c[0],1); 

                    },
                    "Cancel" : function() {                            
                        $(this).dialog("close");
                    }
                });

                $("#dialog").dialog("open");


            });

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

在调用点击事件时使用on 或live

$(".c_del1").on('click',function(){

                --------------------


            });

或

$(".c_del1").live('click',function(){

                --------------------


            });

【讨论】：

【解决方案2】：

你只绑定第一个元素。试试这个：

$(".c_del1").each(function(n,el){
  $(el).click //...
});

【讨论】：

【解决方案3】：

   function submit_delete(y, z) {
            $.ajax({
                url: 'delete_page.php', type: 'POST',
                data: { fte: y, tipe: z },
                success: function (data) {
                    if (z == 1) {
                        var divv = '#container_table1';
                    } else if (z == 2) {
                        var divv = '#container_table2';
                    } else if (z == 3) {
                        var divv = '#container_table3';
                    }

                    $(divv).html(data);
                    //window.setTimeout(function(){location.reload()},3000);
                    $('.DeleteDialog').dialog("close");
                }
            });
        };

        //function Deletemessage(id, obj) { };
        //Or
        function Deletemessage(obj) {
            var c = ($.trim($(obj).next().val())).split('#');

            $('<div class="DeleteDialog"></div>').appendTo('body')
                    .html('<div><h6>Do You Want to Delete ' + c[1] + '?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Ok: function () {
                                //$(obj).removeAttr('onclick');

                                submit_delete(c[0], 1);

                                //$(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
        };


        <!--<input type="button" value="Delete" onclick="Deletemessage(1,this);" />-->  
       //Or
        <input type="button" value="Delete" class="c_del1" onclick="Deletemessage(this);" />

【讨论】：