JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

Click <b>three</b> for the problem:</br>
<a href="one" class="discuss">One</a><br/>
<a href="two" class="title">Two</a><br/>
<a href="three" class="post">Three</a><br/>
<a href="four" class="desc">Four</a><br/>
<a href="five" class="eventlist">Five</a><br/>
<a href="six" class="event">Six</a><br/>
<br/>
Shouldn't have the problem:<br/>
<a href="one2" class="discuss2">One2</a><br/>
<a href="two2" class="title2">Two2</a><br/>
<a href="three2" class="post2">Three2</a><br/>
<a href="four2" class="desc2">Four2</a><br/>
<a href="five2" class="eventlist2">Five2</a><br/>
<a href="six2" class="event2">Six2</a><br/>

<br/>
Shouldn't work at all:<br/>
<a href="one3" class="discuss3">One3</a><br/>
<a href="two3" class="title3">Two3</a><br/>
<a href="three3" class="post3">Three3</a><br/>
<a href="four3" class="desc3">Four3</a><br/>
<a href="five3" class="eventlist3">Five3</a><br/>
<a href="six3" class="event3">Six3</a><br/>

JavaScript

// Trouble is you will attach two click's to a class="post" item:
var arr = [".discuss .title .post", ".post .desc" , ".eventlist .event"];

for(var a in arr){
    var ar = arr[a].split(' ');
    for(var i in ar){
        $(ar[i]).click(function(e){
            e.preventDefault();
            var href = $(this).attr('href');
            var sele = $(this).attr('selector'); // Should be undefined as its not been set
            console.log(href); 
            console.log(sele); 
            alert("HREF: "+href+" - Selector: "+sele);
        });
    }
}

// Prevent attaching two clicks:
var arr = [".discuss2 .title2 .post2", ".post2 .desc2" , ".eventlist2 .event2"];

for(var a in arr){
    var ar = arr[a].split(' ');
    for(var i in ar){
        if (!$(ar[i]).hasClass('addClickEvent')){
            $(ar[i]).click(function(e){
                e.preventDefault();
                var href = $(this).attr('href');
                var sele = $(this).attr('selector'); // Should be undefined as its not been set
                console.log(href); 
                console.log(sele); 
                alert("HREF: "+href+" - Selector: "+sele);
            }).addClass('addClickEvent');
        }
    }
}

// Won't add a click at all:
var arr = [".discuss3 .title3 .post3", ".post3 .desc3" , ".eventlist3 .event3"];

for(var i in arr){
    if (!$(ar[i]).hasClass('addClickEvent')){
        $(ar[i]).click(function(e){
            e.preventDefault();
            var href = $(this).attr('href');
            var sele = $(this).attr('selector'); // Should be undefined as its not been set
            console.log(href); 
            console.log(sele); 
            alert("HREF: "+href+" - Selector: "+sele);
        }).addClass('addClickEvent');
    }
}