1

基本的なダイアログ ボックスを作成しようとしています。クリックするとダイアログ ボックスが表示されるリンク要素を指定できるようにしたいと考えています。

ダイアログ ボックスの HTML でデータ属性を使用して、この動作を指定しています。

<a id="launch-dialog" href="#"></a>
<div class="dialog" data-behavior="dialog" data-trigger="#launch-dialog">
  <!-- dialog html -->
</div>

$(function(){
  $("[data-behavior='dialog']").dialog();
});

実際の jQuery 拡張機能は、私が問題を抱えている部分です。本文でイベントが正しくトリガーされていないか'dopen'、イベント バインディングが正しく設定されていません。のクリックイベントdata-triggerは間違いなく発生しており、リッスンされています。「オープン検出」ログが表示されない理由はありますか?

(function($) {
  var methods = {
    init: function(options) {

      if (this.data('trigger')) {
        // Add an event listener which causes the dialog to
        // open when the correct link is clicked.
        $(this.data('trigger')).on('click', function(e) {
          e.preventDefault();
          // Trigger a global dialog open event which the dialog can subscribe to.
          $('body').trigger('dopen');
        });
      }
    },
    // Various other methods not shown.
  };

  $.fn.dialog = function(method) {

    // Method handling code not shown...

    // Add handlers for custom events triggered on the body element.
    $('body').bind('dopen', function(e) {
      // This never happns:
      console.log("Open detected");
    });

  };
})(jQuery);
4

1 に答える 1

0

問題を解決するのに十分な情報を質問で誤って提供しませんでした。

私が持っている場所

# Method handling code not shown...

質問コードでは、実際のコードは次のとおりです。

// If it corresponds to a method defined in the method object.
if (methods[method]) {
  return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
// Else, if we pass in an object and 
} else if ( _.isObject(method) || !method ) {
  return methods.init.apply( this, arguments );
} else {
  $.error( 'Method ' +  method + ' does not exist on jQuery.doalog' );
}

ご覧のとおり、このスニペットには 3 つのパスがあります。

  1. メソッド呼び出しの結果を返します。
  2. メソッド呼び出しの結果を返します。
  3. 例外を発生させます。

制御フローはこれらのパスで近道になり、リスナーをバインドしようとする行に到達していませんでした。もちろん、バインドされていないリスナーを起動することはできません。

解決策は、バインディングを初期化メソッドに移動することでした。

  var methods = {
    init: function(options) {

      // Add handlers for custom events triggered on the body element.
      $('body').bind('dopen', function(e) {
        // Now it works!
        console.log("Open detected");
       });

      if (this.data('trigger')) {
        // Add an event listener which causes the dialog to
        // open when the correct link is clicked.
        $(this.data('trigger')).on('click', function(e) {
          e.preventDefault();
          // Trigger a global dialog open event which the dialog can subscribe to.
          $('body').trigger('dopen');
        });
      }
    },
    // Various other methods not shown.
  }
于 2012-08-08T15:04:27.957 に答える