我尝试jQuery的翻转与模态对话框flippy插件

在这里我的代码创建对话框：

$(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();
   });

当对话框出现，当我点击一个链接，我翻转对话框，我显示与此代码相同的内容：

                $('.popCallActionRegister > a').click(function (e) {
                    e.preventDefault();

                    var content = $('div.flip').html(); // ModalDialog -> div.ui-dialog all html

                    $('div.flip').flippy({
                        verso: content,
                        direction: "LEFT",
                        duration: "250"
                    });
                });

这项工作非常好，但我失去了所有的Javascript在我的内容，我不能拖我的对话框中，通话AJAX并不在我的新的翻转工作内容

我怎样才能保持我的javascript活跃？因为它是相同的内容，我只是做一个翻转......这一切。

更新：

这里的jsfiddle

该解决方案集成以下命题

任何帮助将不胜感激！

Answer 1:

jQuery的事件只能被连接到现有元素。我对你们的HTML是什么，以及你想达到什么样的几个假设，所以我可能是错的，但是当你这样做：

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

要复制您的div的内容，而不是与它相连的事件。所以它不是“禁用您的JavaScript”，你只是创建不附带任何事件的新元素。因此，尝试这个：

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

这应该复制的元素，所有的事件，但同样，我不知道翻页插件的幕后发生了什么，它可能无法正常工作。

如果你没有使用jQuery UI的模式，我会告诉你使用。对（）从jQuery来连接你的事件，或重新连接使用onReverseFinish回调从倒装插件的所有事件。

编辑1

好吧，我有一个看看flippy插件，它的工作方式与jQuery UI的对话框冲突的，我无法找到一种方法，让他们无需编辑插件的源一起工作。 Flippy动画你的容器的Y轴90度，通过移除什么容器内，并与任何您提供的“反面”参数替换掉期的内容，动画会恢复到0的问题是，当对话框元素被删除， jQuery UI的运行，以清除对话框控件的所有引用的方法（你可以看到，即使覆盖消失）。

我的建议是找到一个更灵活的插件，或编辑您所使用的一个。除删除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>

查找插件的这一部分：