JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<a id="call1" href="#" > CALL1 </a>
<a id="call2" href="#" > CALL2 </a>
<a id="call3" href="#" > CALL3 </a>
<a id="call4" href="#" > CALL4 </a>

<a id="bind" href="#" > BIND </a>
<a id="unbind" href="#" > UNBIND </a>

JavaScript

$(document).ready(function() {

    $("a[id*=call]").each(function(i, value) {
        //alert("".concat(i,"-",value,"-",$(this).text()));,
        $(this).css('color', '#'.concat(Math.ceil(Math.random() * 99), Math.ceil(Math.random() * 99), Math.ceil(Math.random() * 99)));
    });


    $('#bind').click(bindall);
    $('#unbind').click(unbindall);

    function bindall() {
        $("a[id*=call]").each(function(i, value) {
            $(this).bind('click.link', function() {
                $('<span>'.concat($(this).text(),'</span>')).appendTo('body').fadeOut(1000);
            });            
            
        });
$('<span>'.concat('bind all call link','</span>')).appendTo('body').fadeOut(1000);
    }

    function unbindall() {
        $("a[id*=call]").unbind('.link');
        $('<span>'.concat('unbind all call link','</span>')).appendTo('body').fadeOut(1000);
    };



});