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

回答

相關問題