2

これを書く前から問題を解決していたので、学習目的でのみこの質問をしていますが、他の人に役立つ何かを指摘するかもしれません.

私はTwitter Bootstrapとそのモーダルライブラリを使用しています。これが私のコードの動作です。モーダルを開き、ユーザーに json を入力するように求めます。次に、ユーザーが「計算ボタン」を押してデータを計算すると、モーダルが閉じますdata-dismiss。

data-dismissjQuery、javascript、またはその他を使用して、html 属性によってトリガーされるアクションを防止できるかどうかを知りたいだけです。

モーダルの HMTL コードは次のとおりです。

<div class="modal hide fade" id="source_modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Manually insert the data</h3>
    </div>
    <div class="modal-body">
        <textarea class="source_input">Insert your data here</textarea>
        <div class="clear"></div>
        <a href="#" class="btn action_clear">Clear</a>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a class="btn btn-primary action_compute" data-dismiss="modal" href="#"><i class="icon-fire"></i> Compute</a>
    </div>
</div>

最後のボタン (計算ボタン) にはdata-dismiss="modal"

つまり、基本的に、アンカーtry catchのクラスに関連付けられた関数があります。action_compute

この jQuery コードを参照してください。

// compute graph with json input
  $('.action_compute').on('click', function(event) {
    try
    {
      var json = JSON.parse($('.source_input').val());
      create_graph(json);
    }
    catch(err)
    {
      txt="There was an with your json data.\n";
      txt+="Error description: " + err.message + "\n\n";
      txt+="you can try to validate it with JSONLint. You may also leave the textarea blank for default behaviour";
      alert(txt);
    }
  });

によって引き起こされるアクションを防ぐことは可能data-dismissですか?

ノート：

  • Twitter ブートストラップは、モーダルを閉じるための jquery メソッドを提供するので、削除して、試行の最後に到達した場合にのみdata-dismiss使用してモーダルを閉じます。$('#upload_modal').modal('hide');
  • jQuery コードの最初の行に配置された場合、 jQueryevent.preventDefault();は却下アクションを停止しません;)catch(err)
4

1 に答える 1

9

hideメソッドの実行を防ぐためにリスナーを追加してみてください。

$('.modal').one('hide', function (e) {e.preventDefault()});​​​​​​​​​​​​​​​

これをエラー キャッチ セクション内に配置します。への呼び出しの前にクリック イベントが処理される限りhide()、これは機能するはずです。

JSFiddle

質問は学習目的であるとおっしゃっていたので、Bootstrap プラグイン イベントのアーキテクチャに関する追加情報をここに追加します。

多くの Bootstrap プラグインには、「前」イベントと「後」イベントの両方が含まれています。「前」のイベント (この場合はhide ) は、関連付けられたメソッドの重要なアクションが実行される前にトリガーされ、DOM に伝達されます。実行が元のトリガー メソッドに戻ると、最初に、アクションがキャンセルされたかどうかのチェックが行われます。

if (e.isDefaultPrevented()) return

したがって、呼び出すイベント リスナーe.preventDefault()は、効果的にアクションをキャンセルします。シンプルで、期待どおりです。

イベントをトリガーする適切に実装された jQuery プラグインには、この機能が必要です。

于 2012-08-18T00:10:59.510 に答える