Usa javascript per fare clic su uno pseudo-elemento?

Question

Mi chiedo come abilitare il clic su uno pseudoelemento :before (la parte arancione del div sul collegamento JSfiddle I in basso). Ho letto che dal momento che gli pseudo-elementi non sono nel DOM, sarebbe necessario un trucco per questo. Sfortunatamente, non riesco a trovare uno Stackoverflow Q & A esistente che mostri effettivamente codice funzionante.

Link: http://jsfiddle.net/Vv6Eb/4/

HTML:

<div></div> 

CSS:

div { position:relative; background-color:#333; 
     padding:20px; margin:20px; float:left; 
} 

div:before { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
} 

Answer 1

Una soluzione per questo sarebbe per aggiungere dinamicamente un <span> alla voce e assegnando un metodo click ad esso. Like this fiddle.

var item = $('<span />'); 
item.click(function() { alert('click'); }); 
$('div').append(item); 

CSS

div { position:relative; background-color:#333; 
     padding:20px; margin:20px; float:left; 
} 

div span { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
} 

Answer 2

So che sta tentando di utilizzare: prima, ma per questa situazione, non puoi semplicemente creare un nuovo div con una classe da usare come un gancio e aggiungerlo al div originale?

Qualcosa di simile potrebbe funzionare:

var newDiv = $("<div class='orangeCircle'>"); 
$(".parentDivToOrangeCircle").append(newDiv); 

E il CSS:

.parentDivToOrangeCircle { position:relative; background-color:#333; 
    padding:20px; margin:20px; float:left; 
} 

.orangeCircle { 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
} 

Answer 3

Se sai dove il cerchio "dovrebbe" essere, è possibile utilizzare la trigonometria per vedere se il clic è all'interno del cerchio: http://jsfiddle.net/Vv6Eb/19/

$("div").click(function(e){ 
    var $me = $(this), 
     width = $me.outerWidth(), 
     height = $me.outerHeight(), 
     top = $me.position().top, 
     left = $me.position().left; 

    var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2)); 

    if (len < 10) 
     alert('ding'); 
});​