翻转模态jQuery对话框禁用我的Javascript [英] Flip a Modal jquery Dialog disable my Javascript

问题描述

我尝试使用 flippy插件来翻转jquery的模式对话框

i try to flip a modal dialog of jquery with flippy plugin

这里是我用于创建对话框的代码:

Here my code for create the dialog :

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

出现对话框时，当我单击链接时，我翻转对话框，并使用以下代码显示相同的内容:

When the dialog appear and when i click on a link, i flip the dialog and i display the same content with this code :

                $('.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在新翻转的内容中不起作用

That work very well but i lost all Javascript in my content and i can't drag my dialog., the call ajax don't work in my new flipped content

我如何使我的JavaScript保持活动状态?因为内容相同，我只需要翻转一下就可以了.

How i can keep my javascript active ? Because it's the same content and i just do a flip...That's all.

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

this solution integrate the propositions below

任何帮助将不胜感激！

推荐答案

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

jQuery events can only be attached to existing elements. I made a few assumptions on what your html is, and what you want to achieve, so I may be wrong, but when you do this:

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

您正在复制div的内容，而不是复制附加到其上的事件.因此，这不是禁用您的JavaScript"，您只是在创建没有附加事件的新元素.因此，请尝试以下方法:

You are copying the content of your div, and not the events attached to it. So it is not "disabling your javascript", you are just creating new elements with no events attached. So try this instead:

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

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

That should copy the element AND all the events, but again, as I don't know what happens behind the scenes of the flip plugin, it may not work.

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

If you were not using jQuery UI's modal, I would tell you to attach you events using .on() from jQuery, or to re-attach all the events using onReverseFinish callback from the flip plugin.

编辑1

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

Ok, I had a look at the flippy plugin, and the way it works is conflicting with jQuery UI dialog and I couldn't find a way to make them work together without editing the plugin's source. Flippy animates Y axis of your container to 90deg, swaps the content by removing what is inside the container and replacing with whatever you provide as "verso" parameter, and animates it back to 0. The problem is that when the dialog element gets removed, jQuery UI runs a method to clear all the references to the dialog widget (you can see that even the overlay disappears).

我的建议是找到一个更灵活的插件，或编辑您正在使用的插件.除了将其内容显示在两个子容器中之外，不要删除其内容，而是将它们拆分为两个子容器.例如，拆分您的内容:

My suggestion would be to find a more flexible plugin, or edit the one you are using. Instead of removing the content of the flipbox, have your content split in two sub containers, than just switch their display property. For example, split your content:

<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);

并将其更改为以下内容:

And change it to something like this:

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

这篇关于翻转模态jQuery对话框禁用我的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！