छद्म-तत्व पर क्लिक करने के लिए जावास्क्रिप्ट का उपयोग करें?

Question

मैं सोच रहा हूं कि :before छद्म-तत्व (जेएसफ़िल्ड I पर div के नारंगी भाग को नीचे लिंक करने के लिए) को क्लिक करने में सक्षम कैसे करें। मैंने पढ़ा है कि चूंकि छद्म तत्व डोम में नहीं हैं, इसलिए आपको इसके लिए एक हैक की आवश्यकता होगी। दुर्भाग्य से, मुझे मौजूदा स्टैक ओवरफ्लो क्यू & ए नहीं मिल रहा है जो वास्तव में कार्य कोड दिखाता है।

लिंक: http://jsfiddle.net/Vv6Eb/4/

HTML:

<div></div> 

सीएसएस:

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

इस का संभावित हल गतिशील मद और इसे करने के लिए एक क्लिक विधि बताए करने के लिए एक <span> संलग्न करने के लिए किया जाएगा। Like this fiddle.

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

सीएसएस

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 में जोड़ना?

कुछ इस तरह काम कर सकते हैं:

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

और सीएसएस:

.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'); 
});​