jQuery：「this」無法找到由.html（）生成的元素

Question

首先，如果主題不清楚，抱歉。

我想構建一個簡單的順序菜單。用戶點擊第一個選項，然後他找到新的子選項。我認爲這個代碼本身就是有說服力的。

<div id="box"> 
Welcome text<br> 
<ul> 
    <li class="option" id="opt1">Option 1</li> 
    <li class="option" id="opt2">Option 2</li> 
</ul> 
</div> 

<script> 
var nextText = "<p>Next text with two more options.</p><ul><li class='option' id='opt1a'>Option 1a</li><li class='option' id='opt1b'>Option 1b</li></ul>"; 

$("#box li").click(function() { 
    var ev = $(this).attr('id'); 
    if (ev==="opt1") { 
    $("#box").html(nextText); 
    } 
}); 
</script> 

Answer 1

您將點擊處理程序綁定到頁面第一次加載時存在的元素。稍後添加的元素不具有點擊綁定。您可以使用代表團.on jQuery中解決這個問題：

$("#box").on("click", "li", function() { 
    var ev = $(this).attr('id'); 
    if (ev = "opt1") { 
     $("#box").html(nextText); 
    } 
});