Jquery SelectMenu在关闭后关闭SimpleModal

当我关闭并重新打开simplemodal时，selectmenu不再有效。Jquery SelectMenu在关闭后关闭SimpleModal

任何人都有这方面的经验或知道如何解决它？

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

来源

2012-01-24 Kyle

我们可以看到您使用的代码吗？ – xanderer

这将是很好，如果你可以通过JsFiddle.net分享你的代码:-) – Qorbani

我无法弄清楚如何建立在JsFiddle ..任何提示？ – Kyle

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

来源

2012-02-03 18:07:11

我会检查一下 – Kyle

它看起来像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的对话框。如果你不想显示标题栏，只需将一个.ui-dialog-titlebar { display: none; }添加到你的CSS选择器。

这里有一个基本的例子：http://jsfiddle.net/fordlover49/nfngy/

来源

2012-01-25 01:32:09 PriorityMark

关于如何“修复它”的任何建议 – Kyle

最好的方法是完全重写扩展，以便它不会使用杀死事件绑定的不良做法。 – PriorityMark

有一个更简单的解决方案 – Kyle

Jquery SelectMenu在关闭后关闭SimpleModal

回答

相关问题