FontAwesome जैसे आइकन फ़ॉन्ट का उपयोग करते समय, मैं jQuery में आइकन को बाइंडबल कैसे बना सकता हूं?

Question

Font Awesome के साथ, मैं आइकन- आइकन को निकालना चाहता हूं। तो मेरे पास मेरे एचटीएमएल में <i class="icon-remove"></i> है, जो पूरी तरह से काम करता है। हालांकि, मैं अपने लिए एक div बंद करने के लिए jQuery में यह बाध्यकारी बनाना चाहता था।

तो मैं प्रयोग किया है:

$(".icon-remove").click(function() { 
     alert("HELLO"); 
     $(".login-window").hide(); 
     $(".register-window").hide(); 
     $(".shadow").hide(); 
    }); 

बहरहाल, यह काम नहीं करता। जब मैं इसे क्लिक करता हूं, कुछ भी नहीं होता है।

यह सीएसएस मैंने उपयोग किया है (नोट भी: cursor: pointer; काम नहीं करता है)।

.icon-remove { 
    display: block; 

    color: #444; 
    cursor: pointer; 
    float: right; 
    margin-right: 15px; 
} 

मैं वास्तव में क्या गलत कर रहा हूं?

Answer 1

यदि पृष्ठ लोड के बाद आइकन गतिशील रूप से जोड़ा गया था, तो उस ईवेंट पर क्लिक नहीं होगा। आपको इसके बजाय on का उपयोग करने की आवश्यकता है।

$(document).on("click", ".icon-remove", function() { 
    alert("HELLO"); 
    $(".login-window").hide(); 
    $(".register-window").hide(); 
    $(".shadow").hide(); 
}); 

Answer 2

आपका कोड ठीक है:

यहाँ यह का उपयोग करने का एक तरीका है। हो सकता है कि आपको अपने जावास्क्रिप्ट कोड में कुछ त्रुटि हो जो पूरी चीज को काम करने से रोक रही है। उदाहरण के लिए फ़ायरफ़ॉक्स पर फ़ायरबग का उपयोग करना, आप यह देखने के लिए कंसोल टैब देख सकते हैं कि आपके कोड में कोई त्रुटि है या नहीं।

यहाँ जे एस बिन अपने कोड का परीक्षण करने के लिए है: CSS भाग के लिए http://jsbin.com/obogof/4

, आप सुनिश्चित करें कि आपके सीएसएस कोड किसी अन्य सीएसएस नियम है कि .icon-remove वर्ग को प्रभावित के बाद आता है होना चाहिए। यह यहां सही तरीके से काम करता है: http://jsbin.com/obogof/5

Answer 3

क्या आपका जावास्क्रिप्ट डीओएम तैयार होने के बाद निष्पादित है? आपको निम्नलिखित की आवश्यकता होगी:

$(document).on("click", ".icon-remove", function() { 
    alert("HELLO"); 
    $(".login-window").hide(); 
    $(".register-window").hide(); 
    $(".shadow").hide(); 
});