दिलचस्प पोस्ट
दोनों स्थानीय और दूरस्थ जीआईटी भंडार के लिए मास्टर शाखा का नाम बदलें तार की रूपांतरण \\ uXXXX में अजगर केवल निर्दिष्ट वर्ण के पहले उदाहरण पर विभाजित स्ट्रिंग विजुअल स्टूडियो 2012 में "प्रीफ़र 32-बिट" सेटिंग का उद्देश्य क्या है और यह वास्तव में कैसे काम करता है? संवर्धित वास्तविकता ढांचा जीआईटी को सूचीबद्ध करना और हटाने से कोई शाखा नहीं है (झूठ?) Facebook के नए एंड्रॉइड एसडीके 3.0 के साथ अनुमतियों का अनुरोध कब करना है? मैं ASP.Net MVC रूटिंग का उपयोग कर मार्ग कैसे करूं? जीडीबी में फ़ंक्शन के रिटर्न वैल्यू का कैसे निरीक्षण किया जाए? सभी ब्राउज़रों के लिए Object.watch ()? अर्रे लिस्ट के लिए समवर्ती सुधारकरण एफ # में `इनलाइन` का उपयोग गहराई बफर से सच्चे z मूल्य प्राप्त करना एक WHERE खंड में उपनाम का उपयोग करना SQL क्वेरी के निष्पादन के आदेश

jQuery – ट्रिगर ईवेंट जब एक तत्व को DOM से निकाल दिया जाता है

मैं यह जानाने की कोशिश कर रहा हूं कि जब कोई तत्व पेज से निकाल दिया जाए तो कुछ जेएस कोड कैसे निष्पादित करें:

jQuery('#some-element').remove(); // remove some element from the page /* need to figure out how to independently detect the above happened */ 

क्या उस के लिए बनाई गई एक घटना है, जैसे कुछ:

 jQuery('#some-element').onremoval( function() { // do post-mortem stuff here }); 

धन्यवाद।

वेब के समाधान से एकत्रित समाधान "jQuery – ट्रिगर ईवेंट जब एक तत्व को DOM से निकाल दिया जाता है"

बस जाँच की, यह पहले से ही JQuery के वर्तमान संस्करण में बनाया गया है:

jQuery – v1.9.1

jQuery UI – v1.10.2

 $("#myDiv").on("remove", function () { alert("Element was removed"); }) 

महत्वपूर्ण : यह Jquery UI स्क्रिप्ट की कार्यक्षमता (JQuery नहीं) है, इसलिए आपको इसे काम करने के लिए दोनों स्क्रिप्ट (jquery और jquery-ui) को लोड करना होगा। यहां का उदाहरण है: http://jsfiddle.net/72RTz/

आप इस के लिए jQuery के विशेष कार्यक्रमों का उपयोग कर सकते हैं।

सभी सादगी में,

सेट अप:

 (function($){ $.event.special.destroyed = { remove: function(o) { if (o.handler) { o.handler() } } } })(jQuery) 

उपयोग:

 $('.thing').bind('destroyed', function() { // do stuff }) 

पियरे और डिजाइनर गय की टिप्पणियों का उत्तर देने के लिए परिशिष्ट:

$('.thing').off('destroyed') कॉल करते समय कॉलबैक फायर नहीं होने के लिए $('.thing').off('destroyed') , यदि हालत बदल जाती है: if (o.handler && o.type !== 'destroyed') { ... }

आप DOMNodeRemoved ईवेंट (DOM स्तर 3 WC3 स्पेस का हिस्सा) से जुड़ सकते हैं।

IE9 में काम करता है, फ़ायरफ़ॉक्स और क्रोम के नवीनतम रिलीज

उदाहरण:

 $(document).bind("DOMNodeRemoved", function(e) { alert("Removed: " + e.target.nodeName); }); 

आप सूचना प्राप्त कर सकते हैं जब तत्वों को DOMNodeInserted लिए बाध्य करके सम्मिलित किया जा DOMNodeInserted

तत्वों को निकालने के लिए कोई भी अंतर्निहित ईवेंट नहीं है, लेकिन आप नकली-विस्तारित jQuery के डिफ़ॉल्ट निकालें विधि द्वारा एक बना सकते हैं। ध्यान दें कि संदर्भ को रखने के लिए वास्तव में इसे दूर करने से पहले कॉलबैक को कॉल किया जाना चाहिए।

 (function() { var ev = new $.Event('remove'), orig = $.fn.remove; $.fn.remove = function() { $(this).trigger(ev); return orig.apply(this, arguments); } })(); $('#some-element').bind('remove', function() { console.log('removed!'); // do pre-mortem stuff here // 'this' is still a reference to the element, before removing it }); // some other js code here [...] $('#some-element').remove(); 

नोट: इस उत्तर के साथ कुछ समस्याएं अन्य पोस्टर द्वारा उल्लिखित हैं

  1. यह तब काम नहीं करेगा जब नोड को html() माध्यम से हटा दिया जाता है replace() या अन्य jQuery के तरीकों की जगह
  2. इस घटना को ऊपर बुलबुले
  3. jQuery UI ओवरराइड को भी हटाएं

इस समस्या का सबसे सुरुचिपूर्ण समाधान ऐसा लगता है: https://stackoverflow.com/a/10172676/216941

हुकिंग .remove() इस को संभालने का सबसे अच्छा तरीका नहीं है क्योंकि पेज से तत्वों को निकालने के कई तरीके हैं (उदाहरण के लिए। .html() , .replace() , आदि)।

विभिन्न स्मृति रिसाव के खतरों को रोकने के लिए, आंतरिक रूप से jQuery, प्रत्येक हटाए गए तत्व के लिए jQuery.cleanData() फ़ंक्शन को कॉल करने की कोशिश करेगा, चाहे इसे हटाने के लिए इस्तेमाल की जाने वाली विधि का ध्यान न रहे।

अधिक जानकारी के लिए इस उत्तर को देखें: जावास्क्रिप्ट मेमोरी लीक

इसलिए, सर्वोत्तम परिणामों के लिए, आपको cleanData फ़ंक्शन को हुक कर देना चाहिए, जो कि वास्तव में jquery.event.destroyed प्लगइन करता है:

http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js

JQuery UI का उपयोग करने वालों के लिए:

jQuery के यूआई ने एक हटाई जाने वाली घटना को लागू करने के लिए jQuery के कुछ तरीकों को ओवरराइड कर दिया है, न केवल जब आप स्पष्ट रूप से दिए गए तत्व को हटाते हैं, लेकिन अगर तत्व किसी भी स्वयं-सफाई वाले jQuery विधियों (उदाहरण के replace , html , आदि।)। यह मूल रूप से आपको उसी घटना में एक हुक डाल करने की अनुमति देता है जो निकाल दिया जाता है, जब jQuery "DOM तत्व से संबंधित घटनाओं और डेटा को" सफाई कर रहा है।

जॉन रेसिग ने संकेत दिया है कि वह इस घटना को jQuery के मूल संस्करण के संस्करण में लागू करने के विचार के लिए खुला है, लेकिन मुझे यकीन नहीं है कि यह वर्तमान में कहां स्थित है।

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

 var count = 1; (function ($) { $.event.special.destroyed_proxy = { remove: function (o) { $(this).trigger('destroyed'); } } })(jQuery) $('.remove').on('click', function () { $(this).parent().remove(); }); $('li').on('destroyed_proxy destroyed', function () { console.log('Element removed'); if (count > 2) { $('li').off('destroyed'); console.log('unbinded'); } count++; }); 

यहाँ एक बेला है

मुझे jQuery के विशेष कार्यक्रमों का उपयोग करते हुए mtkopone के उत्तर पसंद है, लेकिन ध्यान दें कि यह काम नहीं करता है) जब तत्व हटाए जाने के बजाय अलग हो जाते हैं या ख) जब कुछ पुराने गैर-जेके लाइब्रेरी आपके तत्वों को नष्ट करने के लिए आंतरिक HTML का उपयोग करते हैं

मुझे यकीन नहीं है कि इसके लिए कोई ईवेंट हैंडल है, इसलिए आपको डीओएम की एक प्रति रखना है और मौजूदा डोम से किसी भी तरह की मतदान लूप की तुलना करना होगा – जो काफी बुरा हो सकता है। हालांकि फायरबग ऐसा करता है – यदि आप HTML का निरीक्षण करते हैं और कुछ DOM- परिवर्तन चलाते हैं, तो यह थोड़े समय के लिए फ़ायरबग कंसोल में पीले रंग में बदलाव को हाइलाइट करता है।

वैकल्पिक रूप से, आप एक निष्कासन फ़ंक्शन बना सकते हैं …

 var removeElements = function(selector) { var elems = jQuery(selector); // Your code to notify the removal of the element here... alert(elems.length + " elements removed"); jQuery(selector).remove(); }; // Sample usage removeElements("#some-element"); removeElements("p"); removeElements(".myclass"); 

एक अन्य दृष्टिकोण यह है कि समय-समय पर जांच की जाए कि क्या तत्व अभी भी DOM का हिस्सा है, यह जांचकर कि उसके माता-पिता नोड हैं यदि तत्व को हटाया जा सकता है, तो आपको कोई अंदाज़ा नहीं है, तो आप एक अंतराल का उपयोग कर सकते हैं:

 var elem = document.querySelector('#some-element'); var intvl = setInterval(function(){ if (!elem || !elem.parentNode){ clearInterval(intvl); console.log('elem is no more'); } },10); 

http://codepen.io/oriadam/pen/QEQGjq

पेशेवरों:

  • JQuery का कोई उपयोग नहीं
  • किसी भी तरह के हटाने का समर्थन करता है – jQuery, एचटीएमएल जोड़तोड़, कोई अन्य पुस्तकालय

विपक्ष:

  • JQuery का कोई उपयोग नहीं 🙂
  • अंतराल का उपयोग ← यह आप की संदिग्ध घटनाओं को जोड़कर सुधार किया जा सकता है, अंतराल का उपयोग करने के बजाय

यह कैसे एक jQuery लाइव निकालें श्रोता बनाने के लिए है :

 $(document).on('DOMNodeRemoved', function(e) { var $element = $(e.target).find('.element'); if ($element.length) { // do anything with $element } }); 

या:

 $(document).on('DOMNodeRemoved', function(e) { $(e.target).find('.element').each(function() { // do anything with $(this) } }); 

JQuery UI का उपयोग किए बिना समाधान

( मैंने jQuery के यूआई फ्रेमवर्क से इस एक्सटेंशन को निकाला है )

इसके साथ कार्य करता है: empty() और html() और remove()

 $.cleanData = ( function( orig ) { return function( elems ) { var events, elem, i; for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) { try { // Only trigger remove when necessary to save time events = $._data( elem, "events" ); if ( events && events.remove ) { $( elem ).triggerHandler( "remove" ); } // Http://bugs.jquery.com/ticket/8235 } catch ( e ) {} } orig( elems ); }; } )( $.cleanData ); 

इस समाधान के साथ आप ईवेंट हैंडलर को भी खोल सकते हैं।

 $("YourElemSelector").off("remove"); 

कोशिश करो! – उदाहरण

 $.cleanData = (function(orig) { return function(elems) { var events, elem, i; for (i = 0; (elem = elems[i]) != null; i++) { try { // Only trigger remove when necessary to save time events = $._data(elem, "events"); if (events && events.remove) { $(elem).triggerHandler("remove"); } // Http://bugs.jquery.com/ticket/8235 } catch (e) {} } orig(elems); }; })($.cleanData); $("#DivToBeRemoved").on("remove", function() { console.log("div was removed event fired"); }); $("p").on("remove", function() { console.log("p was removed event fired"); }); $("span").on("remove", function() { console.log("span was removed event fired"); }); // $("span").off("remove"); $("#DivToBeRemoved").on("click", function() { console.log("Div was clicked"); }); function RemoveDiv() { // $("#DivToBeRemoved").parent().html(""); $("#DivToBeRemoved").remove(); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>OnRemove event handler attached to elements `div`, `p` and `span`.</h3> <div class="container"> <br> <div id="DivToBeRemoved"> DIV TO BE REMOVED <p>i am p (within div) <br><br><span>i am span (within div)</span></p> </div> </div> <button onclick="RemoveDiv();">Click here to remove div above</button> 

डेविड का उत्तर:

जब आप किसी अन्य फ़ंक्शन के साथ सू करना चाहते हैं, उदाहरण के लिए html () मेरे मामले में जैसे, नए फ़ंक्शन में वापसी जोड़ने के लिए मत भूलना:

 (function() { var ev = new $.Event('html'), orig = $.fn.html; $.fn.html = function() { $(this).trigger(ev); return orig.apply(this, arguments); } })(); 

इस।

 $.each( $('#some-element'), function(i, item){ item.addEventListener('DOMNodeRemovedFromDocument', function(e){ console.log('I has been removed'); console.log(e); }) })