JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-jquery/__inherit/i-jquery__inherit.js"></script>
<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-jquery/__identify/i-jquery__identify.js"></script>
<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-jquery/__debounce/i-jquery__debounce.js"></script>
<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-jquery/__observable/i-jquery__observable.js"></script>
<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-bem/i-bem.js"></script>
<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-bem/__internal/i-bem__internal.js"></script>
<script src="//raw.githubusercontent.com/bem/bem-bl/support/2.x/blocks-common/i-bem/__dom/i-bem__dom.js"></script>
<div class="block-name i-bem" data-bem="{&quot;block-name&quot;:{}}">
    <div class="block-name__body"></div>
</div>
<div class="another-block-name i-bem" data-bem="{&quot;another-block-name&quot;:{}}">
    <div class="another-block-name__body"></div>
</div>

CSS

.block-name_js_inited {
    padding: 15px;
    background: lightgray;
}

.another-block-name_js_inited {
    padding: 15px;
    background: lightgreen;
}

JavaScript

/* дефолтная инициализация */
$(function () {
    BEM.afterCurrentEvent(function () {
        BEM.DOM.init();
    });

    // ========  your code below: ===========
    BEM.DOM.decl('block-name', {
        onSetMod: {
            js: function () {
                this.elem('body')
                    .append('<button class="block-name__focus-elem">block-name__focus-elem</button>');

                var tempElem = $('<button class="block-name__focus-elem">__focus-elem</button>')
                    .appendTo(this.elem('body'));

                tempElem.remove();
            }
        }
    }, {
        live: function () {
            this.liveBindTo('focus-elem', 'click', function () {
                this.elem('focus-elem').focus();
                alert(document.activeElement);
            });

            return false;
        }
    });

    // ========  your code below: ===========
    BEM.DOM.decl('another-block-name', {
        onSetMod: {
            js: function () {
                // Строится "слайдер"
                this.elem('body')
                    .append('<button class="another-block-name__focus-elem">block-name__focus-elem</button>');

                var tempElem = $('<button class="another-block-name__focus-elem">another-block-name__focus-elem</button>')
                    .appendTo($('.another-block-name__body'));

                tempElem.remove();
            }
        }
    }, {
        live: function () {
            this.liveBindTo('focus-elem', 'click', function () {
                this.elem('focus-elem').focus();
                alert(document.activeElement);
            });

            return false;
        }
    });

});