0

誰かが助けてくれることを願っています。'modal'プロパティが'true'に設定されているJQueryモーダルウィンドウでフォームを実行しているときに、いくつかのロジックとスタイルが欠落しています。http://jqueryui.com/dialog/#modal-formのフォームを利用しようとしています。

モーダルウィンドウの外部で使用されているのと同じコードが正しく実行されています。修正方法がわからないので、共有することにしました。

JSFiddleでページを作成しました-http ： //jsfiddle.net/vladc77/GcQRg/16コードを表示します。ただし、そこからモーダルウィンドウを実行することはできません。その結果、同じテストをここにアップロードしました-http://www.vladcdesign.com/modalWindow

（モーダル：true）を設定すると、次の問題が発生します。

1.勤務時間フォームのチェックボックスは、時間を設定するためのメニューを有効/無効にする必要があります

2.「詳細」チェックボックスはテキストフィールドを表示/非表示にする必要があります

3.時間設定フォームで要素間にマージンを設定する機能が失われました。マージンスタイルを使用しているにもかかわらず、すべてのメニューが互いに接触しています。それらは適用されません。

これらの問題はすべて、このDIVをモーダルウィンドウで実行しているときにのみ発生します。モーダルウィンドウの外でも問題なく動作します。誰かがコードの何が悪いのかを助けて説明できるかどうか疑問に思っています。アドバイスをいただければ幸いです。

4

2 に答える 2

1

フィドルとサイトに投稿した例の両方を見ると、次のエラーが発生しています。

Uncaught ReferenceError: closedHours が定義されていません

問題は次の行から発生しているようです。

$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');

また、ダイアログをフィドルにロードできない理由は、JS ファイルを間違った順序で含めているためです。jquery、jquery ui、jquery ui.selectmenu である必要があります。

チェックボックスの変更機能にもバグがあります。次のようになります。

$('input[type=checkbox]').change(function() {
    if (!this.checked) {
        $(this).parent().siblings('select').removeAttr("disabled");
    }
    else {
        $(this).parent().siblings('select').attr('disabled', 'disabled');
    }
});

すべてを変更しても、チェックボックスはまだ機能していなかったので、カスタム jquery および jquery ui 参照を削除しました。私がそれを行ったとき、それらはうまく機能したので、それらをカスタマイズするために行ったことが問題の原因です。ここで私の変更を確認できます。

于 2012-10-13T09:16:48.527 に答える
0

1番目 $(document).ready(function(){}); と 2 番目 $(function() { }); は同じです。コードはこれらのブロックにある順に実行されます。

ただし、$(window).load(function(){ }); 少し異なりますが、後で実行されます。この投稿をチェックして、違いを確認してください。

クリック イベントを「モーダル ウィンドウを開く」ボタンに定義して、それが発生したときにすべてのバインディングを実行することで、少し実験することができます。

$('#create-user').bind('click',function(e){
  // To avoid navigating by link
  e.preventDefault();
  e.stopPropagation();
  // Do every binding / appending 
  // $('.workDayHours').each(function() { ...
});
于 2012-10-13T09:01:23.723 に答える