2

我尝试使用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

该解决方案整合了以下命题

任何帮助将不胜感激 ！

4

2 回答 2

3

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

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

您正在复制 div 的内容，而不是附加到它的事件。所以它不是“禁用你的javascript”，你只是在创建没有附加事件的新元素。所以试试这个：

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

那应该复制元素和所有事件，但同样，由于我不知道翻转插件的幕后发生了什么，它可能不起作用。

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

编辑 1

好的，我查看了 Flippy 插件，它的工作方式与 jQuery UI 对话框相冲突，我无法在不编辑插件源代码的情况下让它们一起工作。Flippy 将容器的 Y 轴设置为 90 度，通过删除容器内的内容并替换为您作为“verso”参数提供的任何内容来交换内容，并将其设置为 0。问题是当对话框元素被删除时， jQuery UI 运行一个方法来清除对对话框小部件的所有引用（您可以看到甚至覆盖消失了）。

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

<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();
于 2013-08-09T01:41:34.357 回答
0

看我的例子：http ://codepen.io/jdnicholsc/pen/IcDge

快乐编码

于 2013-08-15T16:29:01.963 回答