JSFiddle - React, Tailwind, and code Playground

by NickJosevski

HTML

<input type="button" id="btn" value="manual" />
<div id="on-going-uploads">-On Going-
    <ul>
        <li data-id="0" data-status="in-progress">
            <span class="qq-upload-file">avifile.1.avi</span>
            <span class="qq-upload-spinner">
            </span><span class="qq-upload-size" style="display: inline; ">78% from 0.2GB</span>
            <a class="qq-upload-cancel" href="#">Cancel</a>
            <span class="qq-upload-failed-text">Failed</span>
        </li>
        <li data-id="1" data-status="in-progress">
            <span class="qq-upload-file">avifile.1.avi</span>
            <span class="qq-upload-spinner"></span>
            <span class="qq-upload-size" style="display: inline; ">78% from 0.2GB</span>
            <a class="qq-upload-cancel" href="#">Cancel</a>
            <span class="qq-upload-failed-text">Failed</span>
        </li>
        <li data-id="2" data-status="in-progress">
            <span class="qq-upload-file">avifile.1.avi</span>
            <span class="qq-upload-spinner"></span>
            <span class="qq-upload-size" style="display: inline; ">78% from 0.2GB</span>
            <a class="qq-upload-cancel" href="#">Cancel</a>
            <span class="qq-upload-failed-text">Failed</span>
        </li>
    </ul>
</div><div id="output"></div>

JavaScript

var attachF = function (element, type, fn) {
    //element.click(fn);
    if (element.addEventListener) {
        element.addEventListener(type, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, fn);
    }
};

//DOES not work as Javascript :(
//DOES WORK if jQuery is used to add the click event !!

$("li").each( function () { attachF($(this)[0], 'click', function (e) {
                    console.log('cancel activated');
                    $("#output").append('cancel called');        
                    e = e || window.event;
                    var target = e.target || e.srcElement;
                })
    });
              //manual clicks work, how about automated...
                            
var jqObj = $('[data-id="1"]');
                     //jqObj.click();       
var obj = jqObj[0];
                            obj.onclick.apply(obj)
                 //console.log(obj );
                 console.log('click' in obj );
                 console.log('onclick' in obj );
                 console.log(obj['onclick']());
                            
                            //foo();
//
  //                    jqObj.click();      
                            
            //$("#btn").click(function () { console.log('button was clicked'); jqObj.click(); } );