What you are looking for is an Observer Pattern, as described eg. here.

But as you are interested in jQuery, you don't need to go the trouble of writing an observer pattern for yourself. jQuery already implements an observer in the guise of its .on() method, which can be invoked on a jQuery collection to cause callback function(s) to fire every time a native or custom event is dispatched.

Here's an example :

$(function() {

    //attach a custom event handler to the document

    $(document).on('valueChange', function (evt) {

        $(this).find(#s0).text(evt.type);

        $(this).find(#s1).text(evt.value);

        $(this).find(#s2).text(evt.change);

        $(this).find(#s3).text(evt.timestamp).toLocaleString();

    });



    //customEvent(): a utility function that returns a jQuery Event, with custom type and data properties

    //This is necessary for the dispatch an event with data

    function customEvent(type, data) {

        return $.extend($.Event(type||''), data||{});

    };



    //randomUpdate(): fetches data and broadcasts it in the form of a 'changeValue' custom event

    //(for demo purposes, the data is randomly generated)

    function randomUpdate() {

        var event = customEvent('valueChange', {

            value: (10 + Math.random() * 20).toFixed(2),

            change: (-3 + Math.random() * 6).toFixed(2),

            timestamp: new Date()

        });

        $(document).trigger(event);//broadcast the event to the document

    }

});

Here's a demo, complete with start and stop buttons for a regular interval dispatch of the custom event.

Notes

• Under some circumstances, it might be more appropriate to broadcast the event to the four data spans individually.


• On the web, you will find mention of a more convenient jQuery.event.trigger({...}) syntax. Unfortunately this was an undocumented feature of jQuery, which disappeared at v1.9 or thereabouts.