JSFiddle - React, Tailwind, and code Playground

by stevebeauge

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 (selector) {
        return $(document).on("mousedown", selector ,function () {
            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;
            }
            return !handled;
        });
    };
})(jQuery);

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