का हिस्सा नहीं है मेरे पास <div> है; इसमें <span> शामिल है। जब आप <div> पर क्लिक करते हैं, तो यह अवधि को हटा देता है, और इसे <div> के साथ प्रतिस्थापित करता है जिसमें <input> और <button> होता है। यह पूरी तरह ठीक है और अच्छा है।संलग्न डिव डीओएम
<button>, जब क्लिक किया जाता है तो उसके माता-पिता <div> (संलग्न एक) को हटा दिया जाता है और इसे <span> से फिर से बदल दिया जाता है, लेकिन कुछ गलत है। ऐसा लगता है कि माता-पिता <div> डोम का हिस्सा नहीं है!
<div id="myPage">
<div id="clickMe" class="selectedField editMe">
<span>Click Me</span>
</div>
</div>
कुछ HTML, कुछ नहीं भी कल्पना:
वैसे भी, यहाँ एक त्वरित उदाहरण है। हालांकि, चूंकि डोम बदल रहा है, इसलिए मैंने घटनाओं को प्रतिनिधि देने के लिए .on का उपयोग किया। यहाँ जावास्क्रिप्ट है:
$(function(){
$('#myPage').on('click', '.selectedField', function() {
if($(this).hasClass('editMe')){
var $this = $(this).toggleClass('editMe editing'),
$input = $('<input/>', {
placeholder: 'type something...'
}),
$cancel = $('<button></button>', {
class: 'cancel',
type: 'button',
html: 'x'
})
$this.children('span').replaceWith($('<div></div>').append($input, $cancel));
}
});
$('#myPage').on('click', '.selectedField .cancel', function() {
var $this = $(this).closest('.selectedField').toggleClass('editMe editing');
console.log($this.children('div')[0]);
$this.children('div').replaceWith('<span>Click Me</span>');
});
});
डेमो: http://jsfiddle.net/Z8abW/
यह सरल पर्याप्त है, सही लग रहा है? बॉक्स पर क्लिक करने से <span><div> के साथ बदलता है, फिर (नया जोड़ा गया) <button> पर क्लिक करके <span> वापस रखता है।
लेकिन, यह काम नहीं करता है। पहला कार्यक्रम काम करता है। मैं <input> और <button> जोड़ने के लिए क्लिक कर सकता हूं, लेकिन <button> पर क्लिक नहीं करता है।
मुझे नहीं पता कि इसे कैसे समझाया जाए, लेकिन ऐसा लगता है कि <div> मैं हटाना चाहता हूं, डोम का हिस्सा नहीं है! जब मैं <button> पर क्लिक करता हूं, तो पृष्ठ पर कुछ भी नहीं होता है। यह सुनिश्चित करने के लिए कि ईवेंट चल रहा था, मैंने console.log जोड़ा। निश्चित रूप से, यह था, लेकिन कुछ अजीब था।
मैं क्रोम 27 का उपयोग कर रहा हूं, और इसके कंसोल में एक साफ सुविधा है। यदि आप console.log डोम तत्व हैं, तो आप लॉग में उन पर होवर कर सकते हैं और यह उन्हें पृष्ठ में हाइलाइट करेगा। मैंने console.log($this[0]) किया, और यह तत्व को हाइलाइट किया, जैसा कि मैं उम्मीद करता हूं। लेकिन, जब मैंने console.log($this.children('div')[0]); किया था, तो पृष्ठ पृष्ठ पर हाइलाइट किया गया था! क्यों नहीं? मुझे लगता है कि तत्व, किसी कारण से, डोम में नहीं है। यह कंसोल पर <div> लॉग करता है, लेकिन यह वास्तविक डोम में से एक प्रतीत नहीं होता है।
इस वजह से $this.children('div').replaceWith लाइन कुछ भी नहीं करती है!
क्या चल रहा है! मैं <span> को <div> के साथ क्यों बदल सकता हूं, लेकिन दूसरी तरफ नहीं?
आपको अपने दूसरे हैंडलर पर प्रक्षेपण रोकने की आवश्यकता है, क्योंकि यह एक लूप का कारण बनता है: ईवेंट को आपके पहले हैंडलर पर चलाया जाता है और जैसे ही आप क्लास एडिट करते हैं, यह इसके माध्यम से चलता है, और इनपुट/बटन –
या फिर झूठ वापस लौटाता है; 'हर बटन, लिंक, लेबल इत्यादि में। –
@RobinLeboeuf: ओह वाह, तुम सही हो! मैंने इसके बारे में भी सोचा नहीं था। धन्यवाद! :- डी –