JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="x">
    <li><a href="somewhere" data-openmode="NewWindow" class="openmode">NewWindow</a>

    </li>
    <li><a href="somewhere" data-openmode="Dialog" class="openmode">Modal</a>

    </li>
    <li><a href="somewhere" class="openmode">Not specified</a>

        <!-- Not specified -->
    </li>
</ul>
<button id="add">add</button>

JavaScript

(function ($) {
    $.fn.myOpenMode = function (event) {

        var $this = $(this);

        var mode = $this.data("openmode");
        var href = this.href;
        var handled = true;
        if (mode) {
            switch (mode) {
                case "NewWindow":
                case "1":
                    alert("NewWindow");
                    break;
                case "Dialog":
                case "2":
                    alert("Dialog");
                    break;

                    // Actually, there are other options, but I removed them for clarity

                default:
                    handled = false;
            }
        } else {
            handled = false;
        }
        if(handled) event.preventDefault();
    };
})(jQuery);

$(function () {
    $(document).on('click', 'a.openmode', function (event) {
        $(this).myOpenMode(event);
    });
    $("#add").click(function () {
        $("#x").append("<li><a href='somewhere' class='openmode' data-openmode='Dialog'>Dynamic</a></li>");
    });
});