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

Question

我试着用flippy插件来翻转一个jquery模态对话框

下面是我创建对话框的代码:

$(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的。on()来附加事件，或者使用翻转插件的onReverseFinish回调来重新附加所有事件。

---

编辑1

Ok，我看了一下flippy插件，它的工作方式与jQuery UI对话框相冲突，我找不到一种方法来使它们一起工作而不编辑插件的源代码。Flippy将容器的Y轴动画为90度，通过移除容器内部的内容并替换为您提供的"verso"参数来交换内容，并将其动画为0。问题是，当dialog元素被删除时，jQuery UI会运行一个方法来清除对dialog小部件的所有引用(您可以看到，甚至覆盖也消失了)。

我的建议是找一个更灵活的插件，或者编辑你正在使用的插件。与其删除flipbox的内容，不如将内容分成两个子容器，而不是切换它们的display属性。例如，拆分您的内容:

<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.empty().append(this._Verso);

然后改成这样:

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

Answer 2

参见我的示例:http://codepen.io/jdnichollsc/pen/IcDge

快乐编码