Jquery 简单脚本的奇怪行为

我希望我能给一个更好的头衔。但我甚至不知道我的问题在哪一个大概的范围内

我正在尝试构建一些东西，允许我在用户发送或保存表单后问“你真的想要吗？”。这是我的小提琴：

$（'.确认这一点'）。单击（函数（e）{
e、 预防默认值（）；
var modal_标记=“”；
$（'body'）。追加（$（模态标记））；
var send_按钮=$（此按钮）；
var formular=send_button.parent（）；
var formular_width=formular.outerWidth（）；
var formular_height=formular.outerHeight（）；
变量重置按钮标记=“”；
$（重置按钮标记）。插入后面（发送按钮）；
变量重置按钮=$（“#重置按钮”）；
var orig_send_value=send_button.attr（'value'）；
var form_marker_markup=''；//临时进入模式覆盖的表单的占位符（稍后查找其原始位置）
$（表格标记标记）。插入后面（公式）；
var form_marker=$（'form#u marker'）；
form_marker.css({
“宽度”：公式宽度+“px”，
“高度”：公式化高度+“px”
});
var modal=$（“#modal_confirm”）；
发送按钮。解除绑定（）；
公式化的.children（）.hide（）；
send_button.attr（'value'，'Yes'）.show（）；
重置按钮。显示（）；
公式化。附加到（模态）；
modal.show（）；
重置按钮。单击（功能（e）{
e、 预防默认值（）；
公式。插入前（表格标记）；
form_marker.remove（）；
modal.remove（）；
重置按钮。解除绑定（）。移除（）；
send_button.attr（'value'，orig_send_value）.unbind（）；
formular.children（）.show（）；
确认（）；
});
});

这应该适用于任何类型的表单-无论输入类型、布局等如何

我对这一点还相当陌生，并且意识到我的jquery代码相当笨拙和粗糙，但仍然可以工作。 因此，基本上我试图捕捉并阻止点击按钮class=“confirm\u this”。整个（隐藏的）表单将再次以模式叠加的形式显示，以前的“发送”按钮现在是“是”按钮

它似乎工作得很好，如果我在页面上只有一个表单，我想问题永远不会发生。但只要我在页面上有两张表格，就会发生这种情况： 我点击表格A上的发送-模式-“否”-重复-重复 然后我点击表格B上的发送-模态-（目前一切正常）-“否”。。。结果：然而，我经常重复表格A的过程——表格B旁边的页面上出现了多少个“否”按钮。在正文结束之前，我也有同样多的按钮。 这只发生在浏览器中，在JSFIDLE中我收到一个“未定义”的警报，但我不知道还有什么未定义。。。Chrome控制台什么都没有

---

谢谢你的帮助……

你需要再做一次吗？您不能使用本机的“确认”对话框吗？这将是一个JqueryUI组件？我在前一段时间研究过这个问题，但从来没有真正抽出时间来进一步研究这个问题。因此，我的计划是构建一个与其他布局/设计一致的定制解决方案。我很乐意尝试另一种解决方案。有什么建议吗？没有，只是一个本地的“确认”对话框，检查好了，我找到了我的解决方案：简化；）由于某种原因，我没能得到索托的推荐。这看起来很简单，但上面提到的所有解决方案都不起作用。也许是因为我用本地文件试过了？！我没有进一步尝试，事实上我不认为这是原因。无论如何，看看我的小提琴，我的工作解决方案。所以，要简单得多……：）谢谢你的回答。

$('.confirm_this').click(function(e){
    e.preventDefault();
    var modal_markup = '<div id="modal_confirm"></div>';
    $('body').append($(modal_markup));

            var send_button = $(this);
            var formular = send_button.parent();
            var formular_width = formular.outerWidth();
            var formular_height = formular.outerHeight();
            var reset_button_markup = '<input id="reset_button" type="reset" value="No">';
                $(reset_button_markup).insertAfter(send_button);
            var reset_button = $('#reset_button');
            var orig_send_value = send_button.attr('value');
            var form_marker_markup = '<div id="form_marker"></div>'; // placeholder for the form which temporarily goes into the modal overlay (and to find it's original location later)
                $(form_marker_markup).insertAfter(formular);
            var form_marker = $('#form_marker');
                form_marker.css({
                    'width': formular_width+'px',
                    'height': formular_height+'px'
                });
            var modal = $('#modal_confirm');

            send_button.unbind();
            formular.children().hide();
            send_button.attr('value', 'Yes').show();
            reset_button.show();
            formular.appendTo(modal);
            modal.show();

            reset_button.click(function(e){
                e.preventDefault();
                formular.insertBefore(form_marker);
                form_marker.remove();
                modal.remove();
                reset_button.unbind().remove();
                send_button.attr('value', orig_send_value).unbind();
                formular.children().show();
                confirm();
            });
});