title: How to dynamically register to jquery custom events?
body: <p>I have built a dom object Engine that has private/public fields/methods that I have <strong>simplified</strong> below:</p>
  
  <pre><code>function Engine(args){
     this.display = args.display;
  
     this.getDisplay = function(){return this.display;}
     this.alertMsg = function(msg){
        console.log(this.display);
        alert(msg);
     }
  }
  </code></pre>
  
  <p>What I would like to do is build a custom event that would be triggered after the <code>alert(msg)</code> such as <code>$(this.display).trigger("afterAlert");</code></p>
  
  <pre><code>function Engine(args){
     this.display = args.display;
  
     this.getDisplay = function(){return this.display;}
     this.alertMsg = function(msg){
        console.log(this.display);
        alert(msg);
        // trigger custom event here
        $(this.display).trigger("afterAlert");
     }
  }
  </code></pre>
  
  <p>Now, this event could be empty or not. How would <strong>one or more</strong> objects declared <strong>later</strong> register to the "afterAlert" event? In my case, additional javascript files are loaded by the main file dynamically and could contain a code ressembling :</p>
  
  <pre><code>function new_obj(){
      bind("afterAlert", function(){
         alert("alert was called");
      });
  }
  </code></pre>