उस तत्व को हटाने के दौरान एचटीएमएल तत्व की घटनाएं हटा नहीं रही हैं

मेरे पास कुछ घटनाएं हैं जो मेरे रीढ़ की हड्डी में बंधी हुई हैं।

sampleView = Backbone.View.extend({
events: {
              "click .sum": "sumButtonFunc",
              "click .diff": "diffButtonFunc"
        }
sumButtonFunc: function(){
    console.log("sum called")
}
diffButtonFunc: function(){
    console.log("diff called");
}
});

यह एचटीएमएल कोड है:

<div class="panel">
<button class="sum" type="button">Sum</button>
<button class="diff" type="button">Diff</button>
</div>

जब मैं इस मॉडल को प्रारंभ करता हूं तो ये बटन दिखाई देते हैं।

मैं jquery.remove() फ़ंक्शन का उपयोग करके इन फ़ंक्शन को हटा रहा हूं।

this.$el.find('.panel').remove();

जब किसी अन्य स्थान पर मैं फिर से इस दृश्य को शुरू कर रहा हूं, इन बटनों (पिछले उदाहरण की घटनाओं) की घटनाएं अभी भी संदर्भ में बनी हुई हैं और घटना को दो बार निकाल दिया जा रहा है। वही हो रहा है अगर मैं तीसरे बार मॉडल को फिर से शुरू कर दूं, तो घटनाओं को तीन बार निकाल दिया जा रहा है।

इस मुद्दे को कैसे हल करें?

1
@ एमयू बहुत छोटा है: हाँ मैं वही कर रहा हूं, मुझे इसे फिर से शुरू करने से पहले el/veiw को हटाना होगा।
जोड़ा लेखक robieee, स्रोत
मेरा जवाब देखें मुझे उम्मीद है कि आप यही चाहते हैं
जोड़ा लेखक Paulo Roberto, स्रोत
क्या आपके पास एक कार्यात्मक उदाहरण है जो आप कर रहे हैं? Jsfiddle.net या jsbin.com पर कुछ शायद? मुझे लगता है जैसे आप कई दृश्य उदाहरणों में एक el साझा कर रहे हैं और स्वयं के बाद सफाई नहीं कर रहे हैं।
जोड़ा लेखक mu is too short, स्रोत
मैं बैकबोन से परिचित नहीं हूं, लेकिन मुझे लगता है कि कोड प्रतिनिधि ईवेंट हैंडलर स्थापित कर रहा है, और आप नए तत्व जोड़ते समय इसे दूसरी बार कॉल कर रहे हैं। इसे पृष्ठ लोड पर कॉल करने का प्रयास करें, न कि जब आप बाद में नए तत्व जोड़ते हैं।
जोड़ा लेखक Anthony Grist, स्रोत
<div class = "panel">//अपना div बंद करें <�बटन वर्ग = "योग" प्रकार = "बटन"> योग </बटन> <�बटन वर्ग = "diff" प्रकार = "बटन"> डिफ </बटन> </div>
जोड़ा लेखक Subash Selvaraj, स्रोत

5 उत्तर

आपके विचार का $ एल क्या है?

रीढ़ की हड्डी आपके $ एल पर घटनाओं का प्रतिनिधित्व करता है। जब आप दृश्य को फिर से शुरू करते हैं, तो ईवेंट फिर से प्रतिनिधि होते हैं। (यह $ el पर jQuery की प्रतिनिधि() विधि का उपयोग करता है)

दृश्य को फिर से शुरू करने से पहले आप अपने $ el को डीओएम से पूरी तरह से हटाना चाहते हैं, क्योंकि प्रतिनिधि को उसी $ el पर फिर से बुलाया जाएगा। आपके कोड से, मुझे लगता है। पैनेल आपके विचार का हिस्सा है।

जब आप अपना दृश्य अनलोड करते हैं तो एक वैकल्पिक विधि [yourView] .undelegateEvents() को कॉल कर देगी।

1
जोड़ा
मुझे वह मिला ... आपके उत्तर के लिए बहुत बहुत धन्यवाद
जोड़ा लेखक robieee, स्रोत

बैकबोन दृश्य को फिर से शुरू करने से पहले इसे नष्ट करना महत्वपूर्ण है। मैं इसे अपने मामले में नष्ट नहीं कर रहा हूं, इसलिए हर बार जब मैं इसे फिर से शुरू कर रहा हूं, तो पुराने दृश्य का संदर्भ उनके बने रहेगा।

हम इस दृश्य को हटा सकते हैं:

$el.remove();

या

var viewOBJ = new sampleView();
viewOBJ.remove();
0
जोड़ा

आपको प्रत्येक तत्व से प्रत्येक घटना को हटा देना चाहिए:

len = $('.panel').children().length;
for (i= 0; i < len; i++){    
  $('.panel').children().eq(len).unbind();
}

आप भी कोशिश कर सकते हैं:

  $('.panel').off('click','.sum',sumButtonFunc);
  $('.panel').off('click','.diff',diffButtonFunc);

Ps: पैनल को हटाने से पहले इस कोड को चलाएं, ईवेंट को हटाने के बाद आप पैनल को हटा सकते हैं।

0
जोड़ा

जब आप बटन हटाते हैं, तो आप उन्हें डीओएम से हटा रहे हैं, लेकिन ईवेंट श्रोताओं अभी भी उस कक्षा के लिए मौजूद हैं। बटन हटाने के दौरान आपको उन घटनाओं को अनइंड करना होगा। हर बार जब आप कोई दृश्य बनाते हैं, तो आप उस वर्ग के श्रोताओं को जोड़ रहे हैं, इसलिए प्रत्येक श्रोता कॉलबैक को कॉल करेगा। यह केवल इस मामले में हो रहा है क्योंकि आप कक्षा के लिए ईवेंट संलग्न कर रहे हैं, जहां अन्य रीढ़ की हड्डी के दृश्यों में, आप ईवेंट हैंडलर को यह पर संलग्न करते हैं, इसलिए ईवेंट को उस तत्व के लिए निकाल दिया जाएगा जिसे आपने क्लिक किया था।

0
जोड़ा
क्या आप कृपया हर बार घटनाओं को अनइंड करने के लिए मुझे बता सकते हैं? मैंने $ ('पैनल') की कोशिश की। बच्चों ()। ऑफ (); या $ ('पैनल')। बच्चे ()। unbind (), लेकिन इनमें से कोई भी मेरे लिए काम नहीं करता है।
जोड़ा लेखक robieee, स्रोत

http://backbonejs.org/#View-undelegateEvents

    this.$el.find('.panel').remove();
    this.undelegateEvents()
0
जोड़ा
यह भी काम नहीं कर रहा है
जोड़ा लेखक robieee, स्रोत