Binding simple enable/disable events via $.fn.on() causes mayhem with $.fn.trigger()'ed

Binding simple enable/disable events via $.fn.on() causes mayhem with $.fn.trigger()'ed

I imagine I'm doing something wrong at a very basic level, but I guess i've been staring at it too long to figure it out. I'm trying to bind simple custom " enable" and " disable" methods to both forms and form fields. The idea is that disabling a field disables the field itself, disabling a form disables any corresponding :submit buttons. However, when I $.fn.trigger() my custom events, they seem to fire on EVERY form/field on the page, not just the one selected. I've created a fiddle to demonstrate and my JS is below...

  1. //Disable FORM event handler
  2. $('body').on('disable', 'form', function () {
  3.     console.log(this.nodeName);
  4.     var $form = $(this);
  5.     $form
  6.         .find(':submit')
  7.         .trigger('disable');
  8.     return $form;
  9. });

  10. //Disable field event handler
  11. $('form').on('disable', 'input,select,textarea,button', function () {
  12.     console.log(this.nodeName);
  13.     var $field = $(this)
  14.     $field
  15.         .addClass('disabled')
  16.         .prop('disabled', true);
  17.     return $field
  18. });

  19. /*
  20.     These fire on ALL input elements on the page????
  21. */
  22. $('#my_form').trigger('disable');
  23. $('#my_text').trigger('disable');