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' );
}

如您所见，该片段具有三种可能的路径：

  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 回答