JSFiddle - React, Tailwind, and code Playground

by nilesh026

HTML

<div id="holder"></div>

JavaScript

$(document).ready(function () {
    $.ajax({
        type: "post",
        url: "/echo/html/",
        data: {
            html: ' <div id="2013_Holidays_.xlsx" class="up-img">   <img class="" width="70px" height="70px"/><span class="file-browse" data-ext="xlsx" data-id="2013_Holidays_.xlsx">2013_Holidays_...</span></div><div id="a91234567889ba.jpg" class="up-img"><img class="file-browse" width="70px" height="70px" src=""/><span class="file-browse" data-ext="jpg" data-id="a91234567889ba.jpg">a91234567889ba...</span></div><div id="aakanksha rajhansa.pdf" class="up-img">    <img width="70px" height="70px" onclick="show_info.call(this)"/><span class="file-browse" data-ext="pdf" data-id="aakanksha rajhansa.pdf">aakanksha rajh...</span></div>'
        },
        success: function (data) {

            $("#holder").html(data).find('.file-browse').single_double_click_for_upimg(function () {
    console.log("single");
     $(this).css('color', 'red');
}, function () {
    console.log("duble");
    $(this).css('color', 'green');
   });
           
        }
    });
    
    var upimgOpts={       
        click: function () {
            console.log("single");
            $(this).css('color', 'red');
        },
        dblclick: function () {
            console.log("duble");
            $(this).css('color', 'green');
        }
    }    
});


$.fn.single_double_click_for_upimg = function (opts) {
return this.each(function(){
    var clicks = 0,
        self = this;   
    
    $(this).on('click', function (event) {
        clicks++;
        if (clicks == 1) {
            setTimeout(function () {
                if (clicks == 1) {
                    opts.click.call(self, event);
                } else {
                    opts.dblclick.call(self, event);
                }
                clicks = 0;
            }, opts.timeout || 500);
        }
    });
     });
}