不能將類添加到動態創建的元素

Question

我想創建基本的刪除和刪除jQuery。 但我有一個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 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事件處理程序。

事件代理允許我們將單個事件偵聽器附加到父元素，該事件偵聽器將觸發所有與選擇器匹配的子元素，無論這些子元素是現在存在還是將來添加。

查看更多about 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李」）點擊（函數（）{。 }）;適用於靜態html，並且您正在動態添加html。

Answer 3

如果您的頁面動態創建元素，則您將該事件綁定到已存在的父項，通常是文檔。

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

Answer 4

您所追加的元素在定義的點擊功能中不存在。要解決它，你可以使用jQuery的delegate（）方法。

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