JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<div class="ui basic segment">
    1. After "First" tab is clicked, click the "ClickMe" button. Alert will appear<br />
    2. <b>BUG:</b> When "First" tab is clicked on again, button stops working. Changing <i>cacheType</i> doesnt change anything!<br />
    3. <b>The goal is to run JS once and then leave it be</b>. So scripts must be evaluated once and tab should not reload, if focused on again. 
</div>

<div class="ui top attached tabular menu">
  <a class="active item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
    
</div>
<div class="ui bottom attached tab segment" data-tab="second">

</div>

CSS

body {
    padding: 1em;
}

JavaScript

var firstTabContent = "<div id='testfirst'>One&nbsp;<button>ClickMe</button></div> \n" +
                "<scr" + "ipt type='text/javascript'>\n" +
                "   $(function() { $('button').click(function() { alert(1) }); $('#testfirst').append('<div>dynamically appended div <b>(will disappear if tab is clicked again!)</b> ' + (new Date()).getTime() + '</div>') });\n" +
                "</scr" + "ipt>";

$('.menu .item')
.tab({
    cache: true,
    cacheType: 'html',
    evaluateScripts: 'once',
    onFirstLoad: function(tabPath, parameterArray, historyEvent) {
        console.log('Initialized tab: ' + tabPath);
    },
    onLoad: function(tabPath, parameterArray, historyEvent) { //tab selected
        console.log('Selected tab: ' + tabPath);
    },
    apiSettings: {
        loadingDuration : 300,
        mockResponse    : function(settings) {
            var response = {
                first  :  firstTabContent,
                
              second : 'Two',
                
              third  : 'Three'
            };
            
            return response[settings.urlData.tab];
        }
    }
});