JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<div>
    <p>
    <button>Add a link (pretend this loads some content from ajax)</button>
    </p>
        
    <div id="loaded_content">
    </div>
    
    <div id="log"></div>
</div>

JavaScript

$(function() {
    // This handler catches clicks of links, even if they are added later
    $('#loaded_content').on('click', 'a', function(ev) {
        var item = $(ev.target);
        var url = item.attr('href');
        if (url !== undefined) {
            $('#log').append($('<p>').text(url));
        }
        return false;
    });
    
    var next_id = 0;
    $('button').on('click', function() {
        var x = ++next_id;
        var new_link = $('<a>')
                .attr('href', 'some_page_' + x + '.html')
                .addClass('.foo')
                .text('Link ' + x);
        var new_para = $('<p>').append(new_link);
        $('#loaded_content').append(new_para);
    });
});