JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<div id='messages'>No Events Triggered Yet</div>
  
  <p>
    <div class='global'>
      <button id='global_namespace' class="ui-state-error">global event: bacon.goodStuff</button>
      <button id='global_longname'>global event: bacon_goodStuff</button>
    </div>
    <div class='element'>
      <button id='element_namespace'>element event: bacon.goodStuff</button>
      <button id='element_longname'>element event: bacon_goodStuff</button>
    </div>
  </p>

JavaScript

$('#messages').bind('bacon.goodStuff bacon_goodStuff',
    function(e, args){
        $(this).empty().append('handled '+args.content+': '+e.type);
    });
      
$('#global_namespace').click(function(e){
    $.event.trigger('bacon.goodStuff', {content: 'global event'});
})
$('#global_longname').click(function(e){
    $.event.trigger('bacon_goodStuff', {content: 'global event'});
})
$('#element_namespace').click(function(e){
    $('#messages').trigger('bacon.goodStuff', {content: 'element event'});
})
$('#element_longname').click(function(e){
    $('#messages').trigger('bacon_goodStuff', {content: 'element event'});
})
      
    $('button').button();