翻转模式jquery对话框禁用我的Javascript

我尝试用

下面是创建对话框的代码：

$(document).ready(function(){
  [...]
  $('<div class="modal-popup"><div>TEST</div></div>')
            .hide() // Hide the dialog for now so we prevent flicker
            .appendTo(document.body)
            .filter('div') // Filter for the div tag only, script tags could surface
            .dialog({ // Create the jQuery UI dialog
                create: function () {
                   $(this).parent().wrap('<div class="flip" style="border:1px solid red;position:relative;z-index:50000;" />');
                },
                title: link.data('dialog-title'),
                dialogClass: "dialog_shadow",
                modal: true,
                resizable: false,
                draggable: true,
                show: { effect: 'fade', duration: 250 },
                hide: { effect: 'fade', duration: 400 },
                width: 'auto',
                beforeClose: function () {
                    resetForm($(this).find('form'));
                    $('input[type=submit]').css('cursor', 'hand');
                }                       
            })
            .end();
   });

这很好，但我的内容中丢失了所有Javascript，我无法拖动对话框。调用ajax在我的新翻转内容中不起作用

如何保持javascript的活动状态？因为内容是一样的，我只是翻了一下…就这样

更新： JSFIDLE 此解决方案集成了以下命题

---

任何帮助都将不胜感激

jQuery事件只能附加到现有元素。 我对您的html是什么以及您想要实现什么做了一些假设，所以我可能错了，但当您这样做时：

var content = $('div.flip').html();

您正在复制div的内容，而不是附加到div的事件。因此，这不是“禁用javascript”，而是创建没有附加事件的新元素。因此，请尝试以下方法：

var content = $('div.flip').clone(true, true);

这应该会复制元素和所有事件，但同样，因为我不知道flip插件的幕后发生了什么，它可能不起作用

如果您没有使用jQuery UI的模式，我会告诉您使用jQuery中的.on（）附加事件，或者使用flip插件中的onReverseFinish回调重新附加所有事件

---

编辑1

好的，我看了flippy插件，它的工作方式与jQueryUI对话框相冲突，如果不编辑插件的源代码，我无法找到让它们一起工作的方法。Flippy将容器的Y轴设置为90度的动画，通过移除容器内的内容并替换为您提供的任何“verso”参数来交换内容，并将其设置为0。问题是，当删除dialog元素时，jqueryui运行一个方法来清除对dialog小部件的所有引用（您可以看到，即使覆盖也会消失）

我的建议是找到一个更灵活的插件，或者编辑你正在使用的插件。与其删除flipbox的内容，不如将内容拆分为两个子容器，而不仅仅是切换其显示属性。例如，拆分内容：

<div class="flipbox">
    <div class="ui-dialog whatever">
        <div class="toggle_me">Content 1 - front</div>
        <div class="toggle_me" style="display:none;">Content 2 - back</div>
    </div>
</div>

并将其更改为如下内容：

this.jO.find('.toggle_me').toggle();

参见我的示例：

---

快乐编码

我也有同样的问题。你解决了吗？在我开始使用

z-index

之后，我在翻转发生后丢失了JS事件。不，我没有解决它：（你可以看到解决这个问题的另一种方法。你可以包括相关的HTML、CSS和a吗？我用JSFIDDLE更新了解决方案。我将你的解决方案添加到了我的中。但是你可以清楚地看到行为。但是你可以准确地看到翻转后的行为。在这一步，我不知道如何做插件正在操作DOM和jQuery UI doesn似乎不喜欢它…我已经更新了答案。希望有帮助。@HugoSilva，改变操作方法似乎是个好主意。我希望作者将来修复他的插件。奖金归你所有！另一个解决方案是使用

onFinish

和

onReverseFinish

重置事件。

this.jO.empty().append(this._Verso);

this.jO.find('.toggle_me').toggle();