javascript - jQuery Custom events for data attribute -

i'm building custom widget system app i'm working on. want have happen ability 1 widget update widget changing out data attributes value. on page load, initial data loaded data-attr via php , using jquery switch out data after fact.

for instance, 1 widget work follows:

• php loads json data dom element
• jquery function passed elements id , retrieves data data-attr , uses produce graph example
• based on user interaction, widget sends data element's data-attr while firing custom jquery event
• initial function gets new data , updates it's graph

i've started demo:

// ranomize number & replace variable  $(function() {    $('#random').click(function(e) {      e.preventdefault();      num = math.random() + 100;      $('#data').attr('data-receiver', num);    });  });    // receive data & output  $(function() {    var output = $('#output');    var received = $('#data').attr('data-receiver');    output.html(received);      // not sure next  });

#content {    background: #efefef;    margin: 40px auto;    display: block;    padding: 50px;    width: 50%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="content">    <div id="data" data-receiver="10"></div>    <strong>output:</strong>    <span id="output"></span>    <br/>    <br/>    <a href="#" id="random">randomize</a>  </div>

but honest i'm not sure how start. have code putting random value receiving dom element, not sure how setup event or write function receive , update #output div.

i'm happy answer questions or write more code better explain goal. in advance.

try utilizing .queue() , .promise() create "subscriber" , "publisher" pattern

var output = $("#output");  var process = function process(next) {     // `this`:`#data`     var num = math.random() * 100;     $(this).data("receiver", num);     return next() };  var update = function update() {   // `this`:`#data`   $(this).promise("process").then(function(received) {     // `received`:`#data`,     // stuff `received`     console.log(received.data("receiver"));     output.html(received.data("receiver"));     received.queue("process", process);     // add `process` `received` `"process"` queue     console.log(received, received.queue("process"));   }); };  // queue first call `process` $("#data").queue("process", process);  $("#random").click(function (e) {     e.preventdefault();             update.call($("#data").dequeue("process"));        }); 

jsfiddle http://jsfiddle.net/jev4wuej/2/