关闭 SimpleModal 后 Jquery SelectMenu 中断

发布于 2024-12-28 13:21:30 字数 3223 浏览 1 评论 0原文

当我关闭并重新打开 simplemodal 时，selectmenu 不再起作用。

有人有过这方面的经验或知道如何解决吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        #simplemodal-overlay{background-color: #000;}
        #simplemodal-container { background-color:#333;border:8px solid#444;padding: 12px;color:white;}
        form { margin: 100px 0 0 0 }
        fieldset { border: 0; }
        label { display: block; }
        select { width: 200px; }
        .overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
    </style>
    <link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css"></link>
</head>
  <body>
    <div id="modal" style="display: none">
        <label>This dropdown works</label>
        <select>
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
        </select>
        <p>Now hit esc key</p>
    </div>
    <a id="link" href="javascript:OpenModal('#modal', 200, 300)">Start By Clicking Here!</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js?ver=1.4.1'></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.button.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
    <script type="text/javascript">
        function OpenModal(selector, h, w, reposition) {
            $(selector).modal({
                onClose: function (dialog) {
                    $.modal.close();
                    $('#link').html("Click me again");
                    $('#modal label').html("This dropdown doesn't work");                    
                }
            });
        }
        $(function () {
            $('select').selectmenu();
        });
    </script>
</body>
    </html>

原文

When I close and reopen a simplemodal the selectmenu no longer works.

Anyone had any experiences with this or know how to fix it?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        #simplemodal-overlay{background-color: #000;}
        #simplemodal-container { background-color:#333;border:8px solid#444;padding: 12px;color:white;}
        form { margin: 100px 0 0 0 }
        fieldset { border: 0; }
        label { display: block; }
        select { width: 200px; }
        .overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
    </style>
    <link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css"></link>
</head>
  <body>
    <div id="modal" style="display: none">
        <label>This dropdown works</label>
        <select>
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
        </select>
        <p>Now hit esc key</p>
    </div>
    <a id="link" href="javascript:OpenModal('#modal', 200, 300)">Start By Clicking Here!</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js?ver=1.4.1'></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.button.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
    <script type="text/javascript">
        function OpenModal(selector, h, w, reposition) {
            $(selector).modal({
                onClose: function (dialog) {
                    $.modal.close();
                    $('#link').html("Click me again");
                    $('#modal label').html("This dropdown doesn't work");                    
                }
            });
        }
        $(function () {
            $('select').selectmenu();
        });
    </script>
</body>
    </html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瘫痪情歌 2025-01-04 13:21:30

无需修改任何一个插件。您只需将绑定移至 onShow 回调即可。以下应该可以解决问题：

    <script type="text/javascript">
    function OpenModal(selector, h, w, reposition) {
        $(selector).modal({
            onShow: function (dialog) {
                $('select', dialog.data[0]).selectmenu();
            },
            onClose: function (dialog) {
                $.modal.close();
                $('#link').html("Click me again");
                $('#modal label').html("This dropdown doesn't work");                    
            }
        });
    }
</script>

可能还需要选项persist: true。如果这不起作用，请告诉我。

There is no need to modify either plugin. You just need to move the binding to the onShow callback. The following should do the trick:

    <script type="text/javascript">
    function OpenModal(selector, h, w, reposition) {
        $(selector).modal({
            onShow: function (dialog) {
                $('select', dialog.data[0]).selectmenu();
            },
            onClose: function (dialog) {
                $.modal.close();
                $('#link').html("Click me again");
                $('#modal label').html("This dropdown doesn't work");                    
            }
        });
    }
</script>

The option persist: true might also be required. If that does not work, let me know.

回复收藏 0 原文

暮年 2025-01-04 13:21:30

看起来是 simplemodal 对话框插件造成的。

简而言之，当它关闭时，它会执行以下代码：

if (s.o.persist) {
  // insert the (possibly) modified data back into the DOM
  ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
}
else {
  // remove the current and insert the original,
  // unmodified data back into the DOM
  s.d.data.hide().remove();
  ph.replaceWith(s.d.orig);
}

replaceWith 删除原始 DOM 元素并插入为创建对话框而复制的元素。您的 selectmenu() 绑定到原始对象，但现在已经消失了。因此，虽然 CSS 被保留（因为 simpleModal 克隆了原始 CSS），但事件绑定却被删除了。

作为使用 simplemodal 插件的替代方案，您可以考虑使用 jquery-ui 的对话框。如果您确实不想显示标题栏，只需添加 .ui-dialog-titlebar { display: none; } 到你的 css 选择器。

这是一个基本示例： http://jsfiddle.net/fordlover49/nfngy/

It looks like the simplemodal dialog plugin is causing this.

In short, when it closes, it executes this bit of code:

if (s.o.persist) {
  // insert the (possibly) modified data back into the DOM
  ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
}
else {
  // remove the current and insert the original,
  // unmodified data back into the DOM
  s.d.data.hide().remove();
  ph.replaceWith(s.d.orig);
}

The replaceWith removes the original DOM element and inserts the one that was copied for the creation of the dialog. Your selectmenu() is bound to the original object, which is now gone. So while CSS is preserved (because simpleModal cloned the original), the event bindings are being blown away.

As an alternative to using the simplemodal plugin, you can consider using jquery-ui's dialog. If you really don't want the title bar to display, simply add a .ui-dialog-titlebar { display: none; } to your css selector.

Here's a basic example: http://jsfiddle.net/fordlover49/nfngy/

回复收藏 0 原文

~没有更多了~