javascript - dispatchEvent not triggering jQuery.on() event listener -

I have the following code that triggers custom name events:

  elem.addEventListener ('Click', function (event) {event.preventDefault (); // some processing content var event = new event ('custom_event'); this.dispatchEvent (event);});  

If I try to capture custom events with jQuery.on (), then it works, but only when I'm not using the Dynate Selector filter.

Then it works:

  $ ('selector'). ('Custom_event', function () {// works});  

but not so:

  $ (document) .on ('custom_event', 'selector', function () {// does not work}); Can anyone put light on it? Here is the problem showing.   
 
 
 is not the event bubble by default, so when you create an event, The form needs to be passed in the form of  bubbles: true  that you want to bunk the incident. You can use to do this. 
 
 If you are using Event Delegation to register event handlers, use Event Bubbleing to work. 
 
 
 
 
  document.querySelectorAll ('.button') [0] .addEventListener ('click', function (e) {var event = new custom event ('custom_evolution', {bubbles: true} ); This.dispatchEvent (event);}); $ (Document) .on ('custom_event', '.button', function () {warning ('custom event has been captured [selector filter]');}); $ ('.button'). ('Custom_event', function) {Warning ('Custom Event Captured');});  
 
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Button class = "button" & gt; Click me & lt; / Button & gt;