jquery लाइव हॉवर


161

हम केवल माउस के साथ मँडरा रहे हैं, तालिका पंक्तियों के लिए एक प्रासंगिक डिलीट बटन दिखाने के लिए निम्न jquery कोड का उपयोग कर रहा हूँ। यह काम करता है लेकिन उन पंक्तियों के लिए नहीं जो मक्खी पर js / ajax के साथ जोड़ी गई हैं ...

क्या लाइव इवेंट के साथ यह काम करने का कोई तरीका है?

$("table tr").hover(
  function () {},
  function () {}
);

जवाबों:


245

jQuery 1.4.1 अब लाइव () ईवेंट के लिए "होवर" का समर्थन करता है, लेकिन केवल एक ईवेंट हैंडलर फ़ंक्शन के साथ:

$("table tr").live("hover",

function () {

});

वैकल्पिक रूप से, आप दो कार्य प्रदान कर सकते हैं, एक मूषक के लिए और एक मूसलीव के लिए:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});

हालांकि यह अभी भी मेरे लिए काम नहीं करता है। मैंने यह करने की कोशिश की: मैं गलत कहाँ जा रहा हूँ? > $ ('टेबल ट्रे')। लाइव ('होवर', फंक्शन () {$ (यह) .find ('। डिलीटबटन'); टॉगल ();});
श्रीपाद कृष्ण

1
यह गलत है और काम नहीं करता है। "मल्टीपल इवेंट्स" हेडर को प्रलेखन के तहत देखें live: api.jquery.com/live
जेसन

34
JQuery के 1.4.2 के रूप में, .live ("होवर") .live ("माउसओवर माउसआउट) के बराबर है, NOT .LIVE (" माउसएंटर मूसलीवेज़ ") - Bugs.jquery.com/ticket-6077 देखें । लाइव ("माउससेंटर मूसलीव", फंक्शन () {...}), या। लिव ("माउसएंटर", फंक्शन () {...})। लाइव ("मूसलवे", फंक्शन) () {...}।
एएम

2
धन्यवाद @ @em, इसने मेरे लिए काम किया: $ ("टेबल ट्रे")। लाइव ("माउसएंटर", फ़ंक्शन () {...})। लाइव ("माउससेल", फ़ंक्शन () {...});
जैकॉकनर

3
JQuery के .liveप्रलेखन पृष्ठ के अनुसार .onइसके बजाय इसका उपयोग करने के लिए कहते हैं । "JQuery 1.7 के रूप में, .live () विधि को हटा दिया गया है। इवेंट हैंडलर संलग्न करने के लिए .on () का उपयोग करें।"
जॉन्थप्रन्योर

110
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/


मेरे लिए भी काम किया। +1 ने फिलिप के संस्करण को बनाने की कोशिश की, जिसमें माउसओवर और माउसएंटर - दोनों के साथ काम नहीं किया गया। लेकिन इस एक ने किया। धन्यवाद!
eduncan911

.liveअब पदावनत कर दिया गया है, अब प्रतिस्थापन विधि के लिए आंद्रे का जवाब देखें।
जॉन्ट उद्यमी

1
यहां उपयोग करने mouseoverऔर mouseoutघटनाओं के कारण कोड को लगातार आग लग जाएगी क्योंकि उपयोगकर्ता तत्व के अंदर माउस को घुमाता है। मुझे लगता है कि mouseenterऔर mouseleaveअधिक उपयुक्त हैं क्योंकि यह केवल एक बार प्रवेश करने पर आग लगाएगा।
जोंथ्रप्रेन्योर

60

.live() jQuery 1.7 के रूप में पदावनत किया गया है

.on()इसके बजाय का उपयोग करें और एक वंशज चयनकर्ता निर्दिष्ट करें

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector

6
यह jquery के रूप में निर्दोष रूप से काम करता है 1.9। सभी सजीव और प्रतिनिधि समाधान का मूल्यांकन किया जाता है! यह बहुत बढ़िया होगा यदि कोई स्वीकार किए गए उत्तर को अस्वीकार कर सकता है और इसके बजाय इसे स्वीकार कर सकता है।
जस्सा

5

JQuery 1.4.1 के साथ, हॉवर ईवेंट के साथ काम करता है live()। यह मूल रूप से सिर्फ मूषक और मूसलीव इवेंट को बांधता है, जिसे आप 1.4.1 से पहले के संस्करणों के साथ भी कर सकते हैं:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

इसके लिए दो बाइंड की आवश्यकता होती है, लेकिन साथ ही साथ काम भी करता है।


5

यह कोड काम करता है:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });

2
"Ui-state-hover" क्या है? यह उपयोगकर्ता के मूल प्रश्न पर कैसे लागू होता है?
इगोरगानापोलस्की

2

चेतावनी: होवर के लाइव संस्करण के साथ एक महत्वपूर्ण प्रदर्शन जुर्माना है। यह विशेष रूप से IE8 पर एक बड़े पृष्ठ पर ध्यान देने योग्य है।

मैं एक ऐसी परियोजना पर काम कर रहा हूँ जहाँ हम AJAX के साथ बहु-स्तरीय मेनू लोड करते हैं (हमारे पास हमारे कारण हैं :)। वैसे भी, मैंने उस होवर के लिए लाइव विधि का उपयोग किया जो क्रोम पर बहुत काम करता था (IE9 ने ठीक किया, लेकिन महान नहीं)। हालांकि, IE8 में यह न केवल मेनू धीमा कर देता है (आपको ड्रॉप होने से पहले कुछ सेकंड के लिए हॉवर करना पड़ता था), लेकिन स्क्रॉलिंग और यहां तक ​​कि साधारण चेकबॉक्स की जांच करने सहित पृष्ठ पर सब कुछ दर्दनाक रूप से धीमा था।

लोड होने के बाद सीधे घटनाओं को बांधने से पर्याप्त प्रदर्शन हुआ।


2
उपयोगी है, लेकिन एक उत्तर की तुलना में अधिक टिप्पणी।
मिकमेकाना
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.