关闭 SimpleModal 后 Jquery SelectMenu 中断答案

【问题标题】：Jquery SelectMenu breaks after closing SimpleModal关闭 SimpleModal 后 Jquery SelectMenu 中断
【发布时间】：2012-01-24 21:42:54
【问题描述】：

当我关闭并重新打开 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>

【问题讨论】：

我们可以看看你使用的代码吗？
如果你能通过 JsFiddle.net 分享你的代码就好了 :-)
我不知道如何在 JsFiddle 中构建它.. 任何提示？

标签： jquery jquery-ui simplemodal select-menu

【解决方案1】：

无需修改任何一个插件。您只需将绑定移动到 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。如果这不起作用，请告诉我。

【讨论】：

【解决方案2】：

看起来是 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/

【讨论】：

关于如何“修复”的任何建议
最好的方法是完全重做扩展，这样它就不会使用破坏事件绑定的不良做法。
必须有一个更简单的解决方案
我为您添加了原始答案的替代方案。您可以尝试自己更新 simplemodal javascript（如果您不是一个强大的 javascript 程序员，这可能是不可取的），或者您可以只使用 jquery-ui 的模态对话框。如果要隐藏标题栏，只需将其类设置为显示：无。