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

Похоже, что этот простой плагин диалогового окна вызывает это.

Короче говоря, когда он закрывается, он выполняет этот бит кода:

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 клонировал оригинал), привязки событий сдуваются.

В качестве альтернативы использованию простого модульного плагина вы можете использовать диалог 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

ответ

Смежные вопросы