SimpleModalを閉じるとJquery SelectMenuが壊れます

simplemodalを閉じてもう一度開くと、selectmenuは機能しなくなります。SimpleModalを閉じるとJquery 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>

出典

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が元のものを複製したため）、イベントバインディングが吹き飛ばされています。

simplemodalプラグインを使用する代わりに、jquery-uiのダイアログを使用することもできます。タイトルバーを表示したくない場合は、.ui-dialog-titlebar { display: none; }をCSSセレクターに追加するだけです。プラグインのいずれかを変更する必要はありませんhttp://jsfiddle.net/fordlover49/nfngy/

出典

2012-01-25 01:32:09 PriorityMark

「修正する」方法についてのアドバイス – Kyle

拡張機能を完全に修正して、イベントバインディングを無効にする悪い方法を使用しないようにするのが最善の方法です。 – PriorityMark

簡単な解決策があります – Kyle

SimpleModalを閉じるとJquery SelectMenuが壊れます

答えて

関連する問題