javascriptを使って擬似要素をクリックしますか？

Question

:before疑似要素（以下にリンクするJSfiddleのdivのオレンジ部分）をクリックする方法を知りたいと思います。擬似要素はDOMにはないので、これについてはハックが必要です。残念ながら、私は実際に作業コードを表示する既存のStackoverflow Q & Aを見つけることができません。

リンク：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

：

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

そしてCSS：このうまくいくかもしれないような

何か。 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

私はあなたが使用しようとしている知っている：前に、このような状況のために、あなただけ作成することはできません。フックとして使用して元のdivに追加するクラスを持つ新しいdiv？これを回避するには、動的項目に<span>を追加し、それにクリックメソッドを割り当てることであろう

.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

円はなる「はずです」どこがわかっている場合は、クリックが円内にあるかどうかを確認するために三角法を使用することができます。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'); 
});​