दस्तावेज़ तत्वों में नहीं क्लिक करें jQuery

Question

jQuery का उपयोग करके कोई विशिष्ट तत्वों पर क्लिक नहीं करता है, और इसके परिणामस्वरूप कार्रवाई करता है?

मैं निम्नलिखित जावास्क्रिप्ट

$('#master').click(function() { 
    $('#slave').toggle(); 
}); 

$(document).not('#master','#slave').click(function() { 
    $('#slave').hide(); 
}); 

और मैं नहीं देख सकता मैं कहाँ गलत तार्किक जा रहा हूँ है। आप एक जीवित उदाहरण here

Answer 1

देख सकते हैं आप दस्तावेज़ पर click घटना के लिए बाध्य कर रहे हैं, आप event.target उपयोग कर सकते हैं तत्व यह है कि घटना शुरू की प्राप्त करने के लिए:

$(document).click(function(event) { 
    if (!$(event.target).is("#master, #slave")) { 
     $("#slave").hide(); 
    } 
}); 

संपादित करें: मैटिस के रूप में सही ढंग से उनकी टिप्पणी में बताते हैं, उपरोक्त कोड #master और #slave (यदि कोई है) के वंशजों से आने वाली क्लिक घटनाओं की पहचान करने में विफल रहेगा।

$(document).click(function(event) { 
    if (!$(event.target).closest("#master, #slave").length) { 
     $("#slave").hide(); 
    } 
}); 

Answer 2

इस कोड है कि आप क्या चाहते है: इस स्थिति में, आप घटना के लक्ष्य की जाँच करने के closest() उपयोग कर सकते हैं? (पूरी तरह से सुनिश्चित नहीं हैं कि मैं सही ढंग से समझ में आ)

$('body').on('click', '*:not(#master, #slave)', function() { 
    $('#slave').hide(); 
}); 

http://jsfiddle.net/gZ4Hz/8/

Answer 3

एक और सोचा, यह काम नहीं कर किया जा सकता है क्योंकि आपका ब्राउज़र 100% ऊंचाई पर body प्रतिपादन नहीं किया जा सकता है; शरीर की ऊंचाई और फिर कुछ अन्य विचारों को ठीक करने के लिए अपने बेस सीएसएस को समायोजित करने का प्रयास करें।

e.stopPropagation(): घटना से अधिसूचित होने से किसी भी माता-पिता के हैंडलरों को रोकने से रोकें, घटना को डीओएम पेड़ को बुलबुला करने से रोकता है।

तो आप निम्न के पहले क्लिक कोड परिवर्तित करते हैं:

$('#master').click(function(e) { 
    e.stopPropagation(); 
    $('#slave').toggle(); 
}); 

तो फिर तुम भी दूसरे के फोन पर हस्ताक्षर को बदल सकता है:

$("body, body *").not('#master, #slave').click(function(e) { 
    $('#slave').hide(); 
}); 

और है कि यह कवर करना चाहिए। कोशिश करो! या this jsFiddle

Answer 4

ईवेंट प्रतिनिधिमंडल को लंबे समय से jQuery द्वारा समर्थित किया गया है। उचित चयनकर्ता बनाने में कठिनाई है। मूल रूप से, delegate का उपयोग किया गया था, लेकिन हाल ही में on के प्रतिनिधि फॉर्म का उपयोग किया जाना चाहिए।

घटना प्रतिनिधिमंडल का उद्देश्य बाल तत्वों पर घटनाओं को सुनना और उन तत्वों पर बाध्य घटना हैंडलरों को आमंत्रित करना है जैसे कि वे माता-पिता की बजाय बाल तत्व से बंधे थे। इसका मतलब यह है कि डीओएम में प्रत्येक तत्व को हैंडलर बाध्य करने के बजाय, आप प्रारंभिक चयन में प्रत्येक तत्व को एक हैंडलर बाध्य कर रहे हैं (document एक एकल तत्व है)।यह भी, तत्वों की एक कभी बदलते सेट करने के लिए बाध्य करने के लिए एक भी चयनकर्ता का उपयोग करने के लिए के रूप में नए तत्व document करने के लिए अपने घटनाओं का प्रचार करेंगे या नहीं, वे अस्तित्व में जब प्रारंभिक ईवेंट हैंडलर ही था एक आसान तरीका के लिए बनाता है:

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) { 
    //this will reference the clicked element 
}); 

साथ ही, ध्यान दें मैं सिर्फ ने कहा कि ऐसा नहीं है कि तत्वों #master या #slave नहीं होना चाहिए, वे #master या #slave के बच्चों या तो नहीं होना चाहिए।

Answer 5

फ़्रेड्रिक के उत्तर दस्तावेज़ में पहले से मौजूद तत्वों के लिए काम करते हैं, लेकिन यह AJAX कॉल द्वारा प्राप्त तत्वों के लिए काम नहीं करता है। मैंने निम्नलिखित की कोशिश की और यह मेरे लिए काम करता है। भावी AJAX कोडर के लिए कोड साझा करना।

$(document).on('click',function(event) { 
     if (!$(event.target).closest("#selector").length) { 
      if ($('#selector').is(":visible")) 
       $('#selector').slideUp(); 
     } 
    }); 

इसे एक टिप्पणी के रूप में पोस्ट किया होगा लेकिन मेरे पास पर्याप्त प्रतिष्ठा नहीं है।