Không thể thêm lớp học vào các yếu tố được tạo động

Question

Tôi muốn tạo cơ bản xóa và xóa bằng jquery. Nhưng tôi có vấn đề với việc thêm jquery, tại sao tôi không thể addClass hoạt động trên <li> mới khi tôi nhấp vào nối thêm.

khi tôi nhấp <li> nó sẽ được thêm lớp hoạt động trên <li>, và sau đó tôi muốn loại bỏ <li> có lớp hoạt động

bất cứ ai có thể giúp tôi tại sao điều này là xảy ra

$(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

Bạn phải sử dụng event delegati cho các thành phần được thêm dynamically.

Bạn nên liên kết click trình xử lý sự kiện bằng phương thức .on().

Tổ chức sự kiện cho phép chúng tôi đính kèm một trình xử lý sự kiện đơn lẻ vào phần tử cha, sẽ kích hoạt tất cả các con cháu phù hợp với bộ chọn, cho dù các hậu duệ đó ​​tồn tại hoặc được thêm vào trong tương lai.

Đọc thêm về 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

Thay đổi như sau:

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

Để

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

vì $ ("ul.appendWrap li") click (function() {. }); hoạt động cho html tĩnh và bạn đang thêm html động.

Answer 3

Nếu trang của bạn đã tạo động các yếu tố bạn sẽ ràng buộc sự kiện với cha mẹ đã tồn tại, thường là tài liệu.

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

Answer 4

Các yếu tố bạn đang thêm không tồn tại trong hàm nhấp chuột được xác định. Để khắc phục nó, bạn có thể sử dụng phương thức delegate() từ 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>