JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div class="spg-buttons spg-more"><button type="button" class="spg-button" data-action="hoge">Button1</button></div>

<div class="spg-buttons spg-more"><button type="button" class="spg-button" data-action="">Button2</button></div>

JavaScript

$.Observer = function(id) {
    var pubSub = {};
    return function(id){
         var callbacks, method, pubsub = id && pubSub[id];
        if(!pubsub) {
            callbacks = $.Callbacks('unique');
            pubsub = {
                publish : callbacks.fire,
                subscribe : callbacks.add,
                unsubscribe : callbacks.remove
            };
            if(id) {
                pubSub[id] = pubsub;
            }
        }
        return pubsub;
    };
}();
    
$(document).on('click', 'button[data-action]', function(e){
   
    $.Observer('tapbutton').publish.call(this, e);
    
    if($(this).attr('data-action')){
$.Observer('tapHasActionButton').publish.call(this, e);        
    }
});

function _tapHasActionButton(e){
   console.log(e);
   console.log(this);
   console.log($(this).attr('data-action'));
};

function _tapbutton(){
    console.log('yes tap!');
};

$.Observer('tapHasActionButton').subscribe(_tapHasActionButton);

$.Observer('tapbutton').subscribe(_tapbutton);