Bir sözde öğeye tıklamak için javascript kullanın?

Question

:before sözde öğesinin (aşağıdaki JSfiddle I bağlantısındaki divanın turuncu kısmı) tıklatılmasını nasıl etkinleştireceğinizi merak ediyorum. Sözde elementlerin DOM'da bulunmadığından bunun için bir saldırıya ihtiyacınız olacağını okudum. Ne yazık ki, aslında çalışma kodunu gösteren mevcut bir Stackoverflow Q & A bulamıyorum.

Bağlantı: 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

Bu BIR geçici çözüm dinamik öğe ve buna bir tıklama yöntemi atama için <span> eklemek olacaktır. 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

Sana kullanmaya çalıştığınız biliyorum: önce, ama bu durum için, sadece oluşturamazsınız Bir kanca ile kullanmak ve özgün div'a eklemek için bir sınıf ile yeni bir div? Böyle

şey işe yarayabilecek:

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

Ve 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

Eğer çember "gerektiği" nereye tıklama daire içinde ise, görmek trigonometri kullanabilirsiniz biliyorsanız: Belki 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'); 
});​