क्या jQuery के पास .delegate ('होवर') के लिए हैंडलआउट है?

Question

मैं उपयोग करने के लिए कोशिश कर रहा हूँ:

$('mydiv').delegate('hover', function() { 
    $('seconddiv').show(); 
}, function() { 
    //For some reason jQuery won't run this line of code 
    $('seconddiv').hide(); 
}); 

Answer 1

उपयोगकर्ता113716 का शानदार उत्तर अब काम नहीं करेगा jQuery 1.9+, क्योंकि छद्म-घटनाhover अब समर्थित नहीं है (upgrade guide)।

इसके अलावा के बाद से jQuery 3.0delegate() बंधन घटनाओं के लिए आधिकारिक तौर पर हटा दिया गया है, इसलिए सभी घटना बाध्यकारी प्रयोजनों के लिए नईon()^(docs) का इस्तेमाल करें।

$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) { 
    $(this).toggle(event.type === 'mouseenter'); 
}); 

अगर आपकी समस्या एक साधारण toggle से अधिक जटिल है, मैं बंधन का सुझाव देते हैं दो अलग-अलग घटनाओं:

आप आसानी से mouseenter mouseleave साथ hover की जगह और on() वाक्य रचना में स्विच करके user113716 के समाधान की ओर पलायन कर सकते हैं :

$('mydiv').on('mouseenter', 'seconddiv', function(event) { 
    // do something 
}).on('mouseleave', 'seconddiv', function(event) { 
    // do something different 
}); 

एनबी: के बाद सेV1.9 और on() मेंको हटा दिया गया था v1.7 में पेश किया गया था, delegate() का उपयोग करके समाधान की कोई वास्तविक आवश्यकता नहीं है - लेकिन अगर आपको किसी कारण से यह पसंद है; यह अभी भी है (अभी के लिए) और नौकरी करता है:

$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) { 
    $(this).toggle(event.type === 'mouseenter'); 
}); 

Answer 2

delegate()^(docs) के साथ, आप यह एक कंटेनर को निर्दिष्ट करते हैं और पहला तर्क तत्व यह है कि घटना को ट्रिगर करने वाला है।

इसके अलावा, .delegate(), केवल एक समारोह को स्वीकार करता है तो hover घटना के लिए आप event.type परीक्षण करने के लिए show()^(docs) या hide()^(docs) निर्धारित करने के लिए की जरूरत है।

$('.someContainer').delegate('.someTarget','hover', function(event) { 
    if(event.type === 'mouseenter') 
     $('seconddiv').show(); 
    else 
     $('seconddiv').hide(); 
}); 

दिखाएँ/छिपाएँ के लिए, यह लिखने के लिए एक छोटा रास्ता toggle()^(docs) उपयोग करने के लिए है, जो एक स्विच तर्क स्वीकार कर सकते हैं जहां true मतलब है show और false मतलब है hide है:

$('.someContainer').delegate('.someTarget','hover', function(event) { 
    $('seconddiv').toggle(event.type === 'mouseenter'); 
}); 

ध्यान दें कि mouseenter घटना jQuery 1.4.3 के रूप में रिपोर्ट की गई है। यदि आप 1.4.2 का उपयोग कर रहे हैं, तो इसे mouseover के रूप में रिपोर्ट किया जाएगा।

---

संपादित करें:

मैं नीचे अपनी टिप्पणी को समझने कर रहा हूँ, तो आप कुछ इस तरह होगा (बेशक उचित चयनकर्ताओं का उपयोग)।

$('mydiv').delegate('seconddiv','hover', function(event) { 
    $(this).toggle(event.type === 'mouseenter'); 
}); 

Answer 3

.delegate() में कोई संभाल नहीं है। साथ ही, आपको उस तत्व को निर्दिष्ट करने की आवश्यकता है जिसे आप पहले पैरामीटर के साथ लक्षित कर रहे हैं।

आप कुछ इस तरह की कोशिश कर सकते हैं, हालांकि:

$('table').delegate('tr', 'hover', function() { 
    $(this).toggle(); 
}); 

Answer 4

संपादित करें: गलत सूचना को हटा दिया।

आप प्रतिनिधिमंडल के बिना hover() विधि का उपयोग करने, कोड काम इस प्रकार दिखाई देगा चाहते हैं:

$('#mydiv').hover(function() { 
    $('#seconddiv').show(); 
}, function() { 
    $('#seconddiv').hide(); 
}); 

सभी का दूसरा, delegate एक बच्चे के लिए एक ईवेंट हैंडलर आवंटित करने के लिए है, तो आप एक निर्दिष्ट करने की आवश्यकता पहले चयनकर्ता। यदि आपको यह सुनिश्चित करने की आवश्यकता है कि यह ईवेंट हैंडलर गतिशील रूप से जोड़े गए तत्वों के लिए मौजूद है, तो मैं इस मामले में mouseenter और mouseleave के साथ .live() पसंद करूंगा।

$('#mydiv').live('mouseenter', function() { 
    $('#seconddiv').show(); 
}).live('mouseleave', function() { 
    $('#seconddiv').hide(); 
}); 

Answer 5

मैं जानता हूँ कि ओ पी एक delegate समाधान चाहते थे (तो मैं था जब मैं इस सवाल से टकरा ...)

लेकिन आगे जांच मुझे पता चला के बाद अपनी js/jQuery सभी

आपको बस पर कोड के बिना एक ही हासिल करना संभव है सीएसएस

.someContainer .seconddiv{ 
    display : none; 
} 

.someContainer:hover .seconddiv{ 
    display : block; 
} 

का एक सा INMO यह एक अधिक कुशल/ligthwheigth समाधान