JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<div id="parent">
    <a href="#" data-page="vw-book.htm" data-method="addobjectid">XXX</a>
    <a href="#" data-page="vw-yyy.htm" data-method="addobjectid">YYY</a>
    <a href="#" data-method="something-else">YYY</a>
</div>

<div id="log"></div>

JavaScript

// Runs when document becomes ready
$(function() {
    // For example
    var objectID = 1234;

    // bind ONE event handler on a parent of all the links    
    $('#parent').bind('click', function(ev) {
        // Tell browser not to follow the link, we are handling it
        ev.preventDefault();
        
        // See which element caused the event
        var item = $(ev.target);
        
        // Extract information from element
        var method = item.data('method');
        
        // Depending on method, do different things
        var addr;
        switch (method) {
            case 'addobjectid':
                // Use the page data
                var page = item.data('page');
                addr = page + '?objectID=' + objectID; // FIXME: not sure where object id comes from
                break;

            case 'something-else':
                // ...possibly get some data we need here...
                addr = 'something else link';
                break;
            // etc...
        }
        
        // location.href = addr;
        $('#log').append('<br>' + addr);
    });
});