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

Question

我尝试用flippy plugin翻转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 保持事件状态？因为它是相同的内容，我只是做了一个翻转......仅此而已。

更新:

HERE jsFiddle

该解决方案集成了以下提议

任何帮助将不胜感激!

Answer 1

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

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

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

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

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

如果您没有使用 jQuery UI 模式，我会告诉您使用 jQuery 中的 .on() 附加事件，或者使用 Flip 插件中的 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();