jQuery 自定义事件

发布于 2024-08-07 22:38:51 字数 1691 浏览 7 评论 0原文

为什么这个没有被触发?

$('#nav').bind('app:event', function (event, status) {
  console.log([event, status]);
});

当这是:

$(document).bind('app:event', function (event, status) {
  console.log([event, status]);
});

正在使用以下方式触发事件:

$(this).trigger('app:event', [options]);

从插件内。

这是整个块:

/* App.js */
$(function ($) {

  // UI Panels
  $('#panels').panels({
    controls: '#nav a'
  });

  $('#nav').bind('app:event', function (event, status) {
    console.log([event, status]);
  });

});

/**
 * Plugin dir
 */
(function($) {
  // Interface
  $.fn.panels = function (options) {
    var settings = {}, current;

    if (options) {
      $.extend(settings, options);
    }

    // Setup
    $('.panel', this).hide();
    $('.panel:first', this).slideDown('slow');

    return this.each(function () {
      var self = $(this);

      $(settings.controls).click(function () {
        // Get reference
        current = this.href.substring(this.href.indexOf('#') + 1);

        // Hide all
        $('.panel', self).hide();
        // Show current
        $('#'+ current)
          .publish({            
            'panelReady': current
          })
          .slideDown();

        return false;
      });
    });
  };

  // Publish event
  $.fn.publish = function (options) {    
    var settings = {
      origin: this      
    };

    if (options) {
      $.extend(settings, options);
    }

    return this.each(function () {
      $(this).trigger('app:event', [options]);
    });
  };

}(jQuery));

我正在尝试实现类似suplish/subscribe/observer之类的解决方案,其中#id可以订阅事件

Why isn't this being triggered?

$('#nav').bind('app:event', function (event, status) {
  console.log([event, status]);
});

when this is:

$(document).bind('app:event', function (event, status) {
  console.log([event, status]);
});

the event is being fired using:

$(this).trigger('app:event', [options]);

from within a plugin.

This is the entire block:

/* App.js */
$(function ($) {

  // UI Panels
  $('#panels').panels({
    controls: '#nav a'
  });

  $('#nav').bind('app:event', function (event, status) {
    console.log([event, status]);
  });

});

/**
 * Plugin dir
 */
(function($) {
  // Interface
  $.fn.panels = function (options) {
    var settings = {}, current;

    if (options) {
      $.extend(settings, options);
    }

    // Setup
    $('.panel', this).hide();
    $('.panel:first', this).slideDown('slow');

    return this.each(function () {
      var self = $(this);

      $(settings.controls).click(function () {
        // Get reference
        current = this.href.substring(this.href.indexOf('#') + 1);

        // Hide all
        $('.panel', self).hide();
        // Show current
        $('#'+ current)
          .publish({            
            'panelReady': current
          })
          .slideDown();

        return false;
      });
    });
  };

  // Publish event
  $.fn.publish = function (options) {    
    var settings = {
      origin: this      
    };

    if (options) {
      $.extend(settings, options);
    }

    return this.each(function () {
      $(this).trigger('app:event', [options]);
    });
  };

}(jQuery));

I'm trying to implement something like a suplish/subscribe/observer like solution where a #id can subscribe to events

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

于我来说 2024-08-14 22:38:51

尝试放置 $(document).ready()

$(document).ready(function() {
    $('#nav').bind('app:event', function (event, status) {
          console.log([event, status]);
    });
});

Try to put $(document).ready() around.

$(document).ready(function() {
    $('#nav').bind('app:event', function (event, status) {
          console.log([event, status]);
    });
});
忱杏 2024-08-14 22:38:51

代码这么少很难说。当您尝试触发它时,您确定 $(this) 引用 $("#nav") 吗?

Difficult to say with so little of the code. Are you sure $(this) refers to $("#nav") when you try to trigger it?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文