Question

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

Answer 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。如果这不起作用，请告诉我。

Answer 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克隆了原始版本），但事件绑定正在被吹走。

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

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

关闭SimpleModal后，Jquery SelectMenu中断

2 个答案: