गतिशील रूप से बनाए गए तत्वों में कक्षा नहीं जोड़ सकते

Question

मैं मूल निकालना और jquery के साथ हटा देना चाहता हूं। लेकिन मुझे jquery append के साथ कोई समस्या है, जब मैं संलग्न करता हूं तो मैं नए <li> पर सक्रिय क्लास को सक्रिय क्यों नहीं कर सकता।

जब मैं < ली > क्लिक करें यह < ली > पर सक्रिय वर्ग को जोड़ने हो जाएगा, और फिर मैं < ली > सक्रिय वर्ग है निकालना चाहते

किसी को भी मेरी मदद कर सकते वजह से ऐसा हो रहा है

$(document).ready(function(){ 
 
    
 
    var list=$('ul.appendWrap > li').length; 
 
    
 
    $('.btn_append').click(function(){ 
 
     $('ul.appendWrap').append('<li>new</li>'); 
 
    }); 
 
    
 
    $('.btn_remove').click(function(){ 
 
    $('li.active').remove(); 
 
    }); 
 
    
 
    $("ul.appendWrap li").click(function(){ 
 
    $(this).addClass('active'); 
 
    }) 
 
    
 
});

li, a { 
 
    cursor: pointer; 
 
} 
 

 
.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="appendWrap"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul> 
 

 
<a class="btn_append">append</a> 
 
<a class="btn_remove">remove</a>

Answer 1

आप event delegati उपयोग करने के लिए उन तत्वों के लिए जो dynamically जोड़े गए थे।

आपको .on() विधि का उपयोग करके click ईवेंट हैंडलर बांधना चाहिए।

घटना प्रतिनिधिमंडल हमें एक माता पिता के तत्व, कि एक चयनकर्ता मिलान सभी सन्तान के लिए सक्रिय कर देगा, चाहे उन वंशजों अब मौजूद है या भविष्य में जोड़ रहे हैं करने के लिए एक भी घटना श्रोता संलग्न करने के लिए, की अनुमति देता है।

event delegationhere के बारे में और पढ़ें।

$(document).ready(function(){ 
 
    
 
    var list=$('ul.appendWrap > li').length; 
 
    
 
    $('.btn_append').click(function(){ 
 
     $('ul.appendWrap').append('<li>new</li>'); 
 
    }); 
 
    
 
    $('.btn_remove').click(function(){ 
 
    $('li.active').remove(); 
 
    }); 
 
    
 
    $(document).on("click","ul.appendWrap li",function(){ 
 
    $(this).addClass('active'); 
 
    }) 
 
    
 
});

li, a { 
 
    cursor: pointer; 
 
} 
 

 
.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="appendWrap"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul> 
 

 
<a class="btn_append">append</a> 
 
<a class="btn_remove">remove</a>

Answer 2

बदलें निम्नलिखित:

$("ul.appendWrap li").click(function(){ 
    $(this).addClass('active'); 
}); 

करने के लिए

$(document).on('click',"ul.appendWrap li",function(){ 
    $(this).addClass('active'); 
}); 

क्योंकि $ ("ul.appendWrap ली") पर क्लिक करें (function() {। }); स्थिर एचटीएमएल के लिए काम करता है और आप गतिशील रूप से एचटीएमएल जोड़ रहे हैं।

Answer 3

यदि आपका पृष्ठ गतिशील रूप से तत्व बना रहा था, तो आप ईवेंट को ऐसे माता-पिता से जोड़ देंगे जो पहले से मौजूद है, अक्सर दस्तावेज़।

$(document).on('click',"ul.appendWrap li",function() { 
    $(this).addClass('active'); 
}); 

Answer 4

जो तत्व आप संलग्न कर रहे हैं वे परिभाषित क्लिक-फ़ंक्शन में मौजूद नहीं हैं। इसे ठीक करने के लिए आप jQuery से प्रतिनिधि() विधि का उपयोग कर सकते हैं।

$(document).ready(function(){ 
 
    
 
    var list=$('ul.appendWrap > li').length; 
 
    
 
    $('.btn_append').click(function(){ 
 
     $('ul.appendWrap').append('<li>new</li>'); 
 
    }); 
 
    
 
    $('.btn_remove').click(function(){ 
 
    $('li.active').remove(); 
 
    }); 
 
    
 

 

 
    $("ul.appendWrap").delegate('li','click',function() { 
 
    $(this).addClass('active'); 
 
    }); 
 
    
 
});

li, a { 
 
    cursor: pointer; 
 
} 
 

 
.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="appendWrap"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul> 
 

 
<a class="btn_append">append</a> 
 
<a class="btn_remove">remove</a>