JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<button type="button" data-action="">アクションが空のボタン</button>
<button type="button" class="spg-button" data-action="{&quot;method&quot;:&quot;post&quot;, &quot;action&quot;:&quot;hello&quot;, &quot;option&quot;:{&quot;data&quot;:&quot;world!&quot;}}">Hello?</button>

<button type="button" class="spg-button" data-action="{&quot;method&quot;:&quot;post&quot;, &quot;action&quot;:&quot;cat say&quot;, &quot;option&quot;:{&quot;data&quot;:&quot;nyan nyan nyan!&quot;}}">Cat</button>

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;
    };
}();

function _tapHasActionButton(e){
   //console.log(e);
   //console.log(this);
   var actions = $(this).attr('data-action');
    
   if(!!actions === false){
       return;
   }
    
   actions = JSON.parse(actions);
   console.log(actions);
    
     return $.ajax({
           type:actions.method,
           url:'/echo/json/',
           dataType:'json',
           data:{
               json:JSON.stringify({"action":actions.action,
                "message":actions.option.data}),
        
           delay: 1
    
         },
           success:function(data){
               $.Observer('success').publish(data);
           }
       });
};

$.Observer('tapHasActionButton').subscribe(_tapHasActionButton);
$.Observer('success').subscribe(function(data){
    $(document.body).append('<p>'+ data.action + ' ' + data.message + '</p>');
});

$(document).on('click', 'button[data-action]', function(e){
   $.Observer('tapHasActionButton').publish.call(this, e);
});