क्या मुझे तत्व निकालने से पहले jquery ईवेंट को अनइंड करने की आवश्यकता है?

मेरे पास jquery-ui-dialog का उपयोग कर एक पृष्ठ है। जब भी संवाद खुलता है, पृष्ठ सामग्री AJAX का उपयोग करने में लोड होती है। फिर यह jquery "चालू()" का उपयोग करके कुछ घटनाओं को बांधता है। जब संवाद बंद हो जाता है, तो यह इसकी सामग्री को खाली कर देगा।क्या मुझे तत्व निकालने से पहले jquery ईवेंट को अनइंड करने की आवश्यकता है?

प्रश्न है, क्या मुझे $ .empty() से पहले ".ajax-content" पर ईवेंट को अनदेखा करने की आवश्यकता है?

संपादित: चिंता 1. किसी भी संभव नीचा जे एस प्रदर्शन? अगर मैं इस तरह से सैकड़ों नोड्स खाली करता हूं।

चिंता 2. तत्व हटा भी स्मृति (या जो भी निष्पादन jQuery के/मूल्यांकन श्रृंखला) से घटनाओं निकालना चाहते हैं?

मैं अब उनके लिए कुछ भी नहीं कर रहा हूं। यदि पृष्ठ रीफ्रेश किए बिना कई बार संवाद खुला/बंद होता है, तो क्या इससे कोई समस्या हो सकती है? इस तरह

कोड नज़र:

<div id="jquery-dialog" class="container"> 
    <div class="ajax-content"> 
    some buttons.... 
    </div> 
</div> 

------after each ajax load------------ 
$(".ajax-content").on("click", ".button", function(event) { 
    //handles the click 
}); 

------on dialog close------------ 
$("#jquery-dialog").empty();

स्रोत

2012-06-09 Reed

+1: क्या एक अच्छा सवाल? मुझे भी चिंता है। – vietean

अरे मुझे पता है कि यह एक पुराना उत्तर है, लेकिन मेरा मानना है कि स्वीकृत उत्तर भ्रामक है।

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

इसलिए आपकी वर्तमान कॉल (खाली करने के लिए) के लिए पर्याप्त होना चाहिए, यह

मेमोरी लीक से बचने के लिए jQuery डॉक्स (http://api.jquery.com/empty/) से से अनबाइंड()

पहले आना की जरूरत नहीं है jQuery तत्वों को हटाने से पहले बाल तत्वों से डेटा और ईवेंट हैंडलर जैसी अन्य संरचनाओं को हटा देता है। यदि आपके आंशिक अंदर (उस दृश्य ajax के माध्यम से भरी हुई है)

स्रोत

2013-07-17 20:07:54 Oscar

उत्तर के लिए धन्यवाद। – Reed

धन्यवाद ... संक्षेप में, बिंदु पर, और प्रलेखन संदर्भ प्रदान किया गया। +1 – greaterKing

यह निकल लेकिन जरूरी बेहतर है।

अधिकांश ब्राउज़र इसे सही तरीके से संभालते हैं और उन हैंडलरों को स्वयं हटा देते हैं।

तुम भी do-i-need-to-remove-event-listeners

बेहतर तरीका इस समस्या को संभालने के लिए देख सकते हैं, अगर आप ईवेंट प्रतिनिधि उपयोग कर सकते हैं।

स्रोत

2012-10-31 07:39:33 Liber

लिंक के लिए धन्यवाद। कुछ नया सीख लिया। – Reed

-1

ऑस्कर जवाब है, अधूरा है आप .empty से पहले .on का उपयोग कर(), तो आप (.off कॉल करना होगा) घटनाओं संलग्न()।

निम्नलिखित कोड में देखें, अगर .off() को नहीं कहा जाता है, तो मानक .click() हैंडलर के माध्यम से p1.html में असाइन की गई घटनाओं को हटा दिया जाता है .empty(), लेकिन p2.html के माध्यम से आवंटित घटनाएं। चालू() को हटाया नहीं जाता है और आंशिक लोड होने पर प्रत्येक बार असाइन किया जाता है।

अनुक्रमणिका।एचटीएमएल

<html> 
<body> 
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <div id='spi' style="padding: 20px; border: 1px solid #666;"> 
    </div> 
    <br/> 
    <a href="p1.html" class="spi">Load Partial 1</a> | 
    <a href="p2.html" class="spi">Load Partial 2</a> 
    <script type="text/javascript"> 
    $(document).on('click', 'a.spi' , function(e) { 
     e.preventDefault(); 

     /* 
     !!! IMPORTANT !!! 
     If you do not call .off(), 
     events assigned on p2.html via .on() 
     are kept and fired one time for each time p2.html was loaded 
     */ 

     $("#spi").off(); 


     $("#spi").empty(); 
     $("#spi").load($(this).attr('href')); 
    }); 
    </script> 
</body> 
</html>

p1.html

This is the partial 1<br/> 
<br/> 
<br/> 
<a href="javascript:void(0)" id='p1_l1'>Link 1</a> 
<br/><br/> 
<a href="javascript:void(0)" id='p1_l2'>Link 2</a> 
<br/><br/> 
<a href="javascript:void(0)" id='p1_l3'>Link 3</a> 


<script type="text/javascript"> 
    $("#p1_l1").click(function(e) { 
     e.preventDefault(); 
     console.debug("P1: p1_l1"); 
    }); 
    $("#p1_l2").click(function(e) { 
     e.preventDefault(); 
     console.debug("P1: p1_l2"); 
    }); 
</script>

p2.html

This is the partial 2<br/> 
<br/> 
<br/> 
<a href="javascript:void(0)" id='p2_l1'>Link 1</a> 
<br/><br/> 
<a href="javascript:void(0)" id='p2_l2'>Link 2</a> 


<script type="text/javascript"> 
    $("#spi").on('click', 'a', function(e) { 
     e.preventDefault(); 
     console.debug('P2: ' + $(this).attr('id')); 
    }); 
</script>

स्रोत

2014-04-10 12:34:15 maxidirienzo

pon.html पर .on() पर आपके कॉल पर ईवेंट '#spi' से जुड़ा हुआ है (आंतरिक 'ए' तत्वों के लिए नहीं)। जब आप इसे बाद में .empty() करते हैं, तो आप 'ए' तत्वों से जुड़ी घटनाओं को अनबाइंड कर रहे हैं लेकिन '#spi' पर मौजूद हैं। मुझे लगता है कि यदि आप $ ("# spi") को फिर से लिखते हैं। ('क्लिक करें', 'ए', फ़ंक्शन) $ ("# spi a") पर। ('क्लिक करें', फ़ंक्शन) पर आपके पास प्रभाव होगा। – Oscar

क्या मुझे तत्व निकालने से पहले jquery ईवेंट को अनइंड करने की आवश्यकता है?

उत्तर

संबंधित मुद्दे