title: Trigger custom events without knowing listening elements?
body: <p>I am stuck with the implementation of custom event handling with jQuery which I tried to adopt from <a href="https://stackoverflow.com/questions/24077709/how-to-send-trigger-event-and-know-if-it-was-cancelled-consumed-by-any-recipient">another thread</a>.</p>
  
  <p>I have two containers who don't know each other. But each of them should be able to handle custom events that might be triggered by some user action in the other container.</p>
  
  <p>My current implementation is:</p>
  
  <pre><code>// In container 1 
  //  register the custom event listener
  $(div1).on('some-custom-event', function(e){
     console.log('this: ', this)
  });
  
  // Add custom event trigger
  $(this).on('click', function(e){
     // do something
     ...
     // Trigger the custom event.
     $(this).trigger('some-other-custom-event');   // no console output
  
     // Trigger the custom event with a new event object.
     var e = jQuery.Event("some-other-custom-event");   // no console output
  
     $(this).trigger(e);
  });
  
  // In container 2
  //  register the custom event listener
  $(div2).on('some-other-custom-event', function(e){
     console.log('this: ', this)
  });
  
  // Add custom event trigger
  $(this).on('click', function(e){
     // do something
     ...
     // Trigger the custom event.
     $(this).trigger('some-custom-event');   // no console output
  
     // Trigger the custom event with a new event object.
     var e = jQuery.Event("some-custom-event");   // no console output
  
     $(this).trigger(e);
  });
  
  // Register the custom event listener for $(document)
  $(document).on('some-custom-event', function(e){   // WORKS!
     console.log('this: ', this)
  });
  </code></pre>
  
  <p>However, it doesn't work for when registering the listers to my containers. It works only when binding the listener to <code>$(document)</code> or as soon as I trigger my events on the elements listening for them, which makes the whole idea useless since I cannot decouple these elements.</p>
  
  <p>How must I correctly implement this?</p>