Javascript 删除记录确认消息

不知是否有人能帮助我

首先，我很抱歉，因为我对这一点真的很陌生，所以请原谅我的一些看似非常基本的问题/错误

下面代码的摘录成功创建了与当前用户相关的记录表

工作解决方案-Baylor Rae'在过去的3-4天里不知疲倦地与我一起寻找解决方案。所有贝勒Rae’都无法提供一个完全成功的剧本，他们当然在这方面起了很大的作用。然而，下面的完整工作脚本是由jazzman1@PHP怪胎提供的

  (function($){

        $.confirm = function(params){

            if($('#confirmOverlay').length){
                // A confirm is already shown on the page:
                return false;
            }

            var buttonHTML = '';
            $.each(params.buttons,function(name,obj){

                // Generating the markup for the buttons:

                buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

                if(!obj.action){
                    obj.action = function(){};
                }
            });

            var markup = [
                '<div id="confirmOverlay">',
                '<div id="confirmBox">',
                '<h1>',params.title,'</h1>',
                '<p>',params.message,'</p>',
                '<div id="confirmButtons">',
                buttonHTML,
                '</div></div></div>'
            ].join('');

            $(markup).hide().appendTo('body').fadeIn();

            var buttons = $('#confirmBox .button'),
                i = 0;

            $.each(params.buttons,function(name,obj){
                buttons.eq(i++).click(function(){

                    // Calling the action attribute when a
                    // click occurs, and hiding the confirm.

                    obj.action();
                    $.confirm.hide();
                    return false;
                });
            });
        }

        $.confirm.hide = function(){
            $('#confirmOverlay').fadeOut(function(){
                $(this).remove();
            });
        }

    })(jQuery);

<input type="submit" value="Delete Record" />

主脚本

 <script type="text/javascript">
        $(document).ready(function(){
            $('form.delete').submit(function(e){
              console.log('submit'); return false;   
            })
        })
    </script>   

<script type="text/javascript">
    $(document).ready(function(){
        $('form.delete').submit(function(e){ 

            e.preventDefault();
            var elem = $(this).closest('.delete');
            var lid = $(this).serialize();
            $.confirm({
                 'title'    : 'Delete Confirmation',
            'message'   : 'You are about to delete this Location. <br />It cannot be restored at a later time! Do you wish to continue?',
                'buttons'   : {
                    'Yes'   : {
                'class' : 'blue',
                'action': function(){
                //elem.slideUp();
                              $.ajax({ 
                            url: 'deletelocation.php', 
                            type: 'POST', 
                            data: lid, 
                            success: function(response) { 
                            console.log('success', response); 
                            }, 
                            error: function() { 
                            console.log('error') 
                            } 
                            }); 
                    }
                },
                'No'    : {
                    'class' : 'gray',
                                        'action': function(){}  // Nothing to do in this case. You can as well omit the action property.

                }
            }
        });

    });

    })
</script>  

<form name="delete" id="delete" class="delete">
<input type="hidden" name="lid" id="lid" value="<?php echo $theID ?>" />
<input type="submit" value="Delete Record"/>
</form>

$（文档）.ready（函数（）{
$（'form.delete'）.submit（函数（e）{
console.log（'submit'）；返回false；
})
})
$（文档）.ready（函数（）{
$（'form.delete'）.submit（函数（e）{
e、 预防默认值（）；
var elem=$（this）.closest（'.delete'）；
var lid=$（this.serialize（）；
美元。确认({
'标题'：'删除确认'，
“消息”：“您将要删除此位置。
以后无法还原它！是否继续？”，
“按钮”：{
“是的”：{
“类”：“蓝色”，
“操作”：函数（）{
//元素slideUp（）；
$.ajax（{
url:'deletelocation.php'，
键入：“POST”，
数据：lid，
成功：功能（响应）{
console.log（'success'，response）；
}, 
错误：函数（）{
console.log（'错误'）
} 
}); 
}
},
“否”：{
“类”：“灰色”，
“action”：函数（）{}//在这种情况下无需执行任何操作。您也可以省略action属性。
}
}
});
});
})

jqueryconfig.js

  (function($){

        $.confirm = function(params){

            if($('#confirmOverlay').length){
                // A confirm is already shown on the page:
                return false;
            }

            var buttonHTML = '';
            $.each(params.buttons,function(name,obj){

                // Generating the markup for the buttons:

                buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

                if(!obj.action){
                    obj.action = function(){};
                }
            });

            var markup = [
                '<div id="confirmOverlay">',
                '<div id="confirmBox">',
                '<h1>',params.title,'</h1>',
                '<p>',params.message,'</p>',
                '<div id="confirmButtons">',
                buttonHTML,
                '</div></div></div>'
            ].join('');

            $(markup).hide().appendTo('body').fadeIn();

            var buttons = $('#confirmBox .button'),
                i = 0;

            $.each(params.buttons,function(name,obj){
                buttons.eq(i++).click(function(){

                    // Calling the action attribute when a
                    // click occurs, and hiding the confirm.

                    obj.action();
                    $.confirm.hide();
                    return false;
                });
            });
        }

        $.confirm.hide = function(){
            $('#confirmOverlay').fadeOut(function(){
                $(this).remove();
            });
        }

    })(jQuery);

<input type="submit" value="Delete Record" />

（函数（$）{
$.confirm=函数（参数）{
if（$（'confirmOverlay'）。长度）{
//确认已显示在页面上：
返回false；
}
var buttonHTML=''；
$.each（参数按钮、函数（名称、对象）{
//为按钮生成标记：
按钮HTML+=''；
如果（！目标动作）{
obj.action=function（）{}；
}
});
变量标记=[
'',
'',
''，参数名称，''，
“”，参数消息“
”，
'',
钮扣，
''
].加入（“”）；
$（标记）.hide（）.appendTo（'body'）.fadeIn（）；
变量按钮=$（“#confirbox.button”），
i=0；
$.each（参数按钮、函数（名称、对象）{
按钮.eq（i++）.单击（函数（）{
//当
//单击“发生”，并隐藏“确认”。
obj.action（）；
$.confirm.hide（）；
返回false；
});
});
}
$.confirm.hide=函数（）{
$（“#confirmOverlay”）.fadeOut（函数（）{
$（this.remove（）；
});
}
})（jQuery）；

主脚本中的表单

 <script type="text/javascript">
        $(document).ready(function(){
            $('form.delete').submit(function(e){
              console.log('submit'); return false;   
            })
        })
    </script>   

<script type="text/javascript">
    $(document).ready(function(){
        $('form.delete').submit(function(e){ 

            e.preventDefault();
            var elem = $(this).closest('.delete');
            var lid = $(this).serialize();
            $.confirm({
                 'title'    : 'Delete Confirmation',
            'message'   : 'You are about to delete this Location. <br />It cannot be restored at a later time! Do you wish to continue?',
                'buttons'   : {
                    'Yes'   : {
                'class' : 'blue',
                'action': function(){
                //elem.slideUp();
                              $.ajax({ 
                            url: 'deletelocation.php', 
                            type: 'POST', 
                            data: lid, 
                            success: function(response) { 
                            console.log('success', response); 
                            }, 
                            error: function() { 
                            console.log('error') 
                            } 
                            }); 
                    }
                },
                'No'    : {
                    'class' : 'gray',
                                        'action': function(){}  // Nothing to do in this case. You can as well omit the action property.

                }
            }
        });

    });

    })
</script>  

<form name="delete" id="delete" class="delete">
<input type="hidden" name="lid" id="lid" value="<?php echo $theID ?>" />
<input type="submit" value="Delete Record"/>
</form>

意见1：

function delete(){
$(document).ready(function(){

这真的是代码中的行顺序吗？jQuery就绪挂钩位于函数定义的内部？或者你错把它们按错误的顺序贴在这里了

如果是前一种情况，那么请先解决这个问题，然后再做其他事情。否则，请继续阅读：

为什么是$（'.item.delete'）？我没有看到任何带有class.item的标记？它在哪里？您确定此选择器首先匹配某些元素吗？此外，您应该使用#delete通过元素的id属性引用元素，而不是.delete，因为它查找具有delete类的元素

您的id:delete按钮和其他按钮都是提交类型的按钮，这意味着它们的单击处理程序不会阻止提交流。您可以将所有按钮类型更改为button，而不是将其作为submit。下面的代码示例

为什么在删除按钮上单击声明性onClick？摆脱它

（此外，在本例中，您实际上不需要表单，除非您希望反序列化表单，这似乎不是给定标记的要求或意图）

此外，您还可以在表单的onsubmit事件中重复添加假返回。
观察1：

function delete(){
$(document).ready(function(){

这真的是代码中的行顺序吗？jQuery就绪挂钩位于函数定义的内部？或者你错把它们按错误的顺序贴在这里了

如果是前一种情况，那么请先解决这个问题，然后再做其他事情。否则，请继续阅读：

为什么是$（'.item.delete'）？我没有看到任何带有class.item的标记？它在哪里？您确定此选择器首先匹配某些元素吗？此外，您应该使用#delete通过元素的id属性引用元素，而不是.delete，因为它查找具有delete类的元素

您的id:delete按钮和其他按钮都是提交类型的按钮，这意味着它们的单击处理程序不会阻止提交流。您可以将所有按钮类型更改为button，而不是将其作为submit。下面的代码示例

为什么是声明者
$('#btn-delete').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

<input type="submit" value="Delete Record" />

<input type="button" id="btn-delete" value="Delete Record" />

<input type="submit" value="Your button" />

<input type="button" value="Your button" />

   <script type="text/javascript">
    $('#btn-delete').click(function (e) {
        e.preventDefault();
        var elem = $(this).closest('.item'), formSerialize = $(this).parent().serialize(), objParent = $(this).parent();
        $('<div></div>').appendTo('body')
                    .html('<div><h6>Delete?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete Confirmation', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                $.ajax({
                                    url: 'deletelocation.php',
                                    type: 'post',
                                    data: formSerialize//,
                                    //success: function (data) {
                                    //    objParent.slideUp('slow').remove();
                                    //}
                                });


                                //Or
                                objParent.slideUp('slow').remove();


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

    });
</script>