JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
    <div id="testarea">
        <ul>
            <li class="addClickMe"></li>
            <li class="addClickMe"></li>
            <li class="addClickMe"></li>
            <li class="addClickMe"></li>
            <li class="addClickAll"></li>
        </ul>
    </div>

JavaScript

$(function () {
    $.each($(".addClickMe"), function(k,v){
        $(this).append($("<button></button>",{"class":"clickMe","text":"Click me!","data-id":k+1}));
    });
    $(".addClickAll").append($("<button></button>",{"class":"clickAll","text":"Click all!"}));
    $(document).on("click", ".clickMe", function(){
        console.log($(this).attr("data-id"));
    });
    $(document).on("click", ".clickAll", function(){
        $(".clickMe").each(function(k, v){
            var $this = this;
            setTimeout(function(){
                fakeClick(event, $this)
            }, (k+1) * 500);
        });
    });
});
    function fakeClick(event, anchorObj) {
        if (anchorObj.click) {
            anchorObj.click();
        } else if(document.createEvent) {
            if(event.target !== anchorObj) {
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                var allowDefault = anchorObj.dispatchEvent(evt);
            }
        }
    }