JavaScript點擊功能不適用於ID和Class？

Question

即使我有兩段相同的代碼，我也無法讓我的jquery函數正常工作。

這裏是主要的jquery函數（我已經刪除了「<」）。

$(".spoiler").append("<button> Reveal Spoiler!</button>"); 
$(".spoiler button").click(function() { 
    $(this).remove(); 
}); 

這會創建一個按鈕，單擊它時會被刪除。

現在，當我這樣做：

$("#family-question").click(function(){ 
    $("#answer-one").append("<button> Answer One </button>"); 
    $("#answer-two").append("<button> Answer Two </button>"); 
    $(".test").append("<button> Answer Three </button>"); 
}); 

$(".test button").click(function() { 
    $(this).remove(); 
}); 

這將創建所有的按鈕。但是，如果我點擊該按鈕，它不會被刪除。

就HTML代碼而言。第一個是;

<p class="spoiler"> 
    <!--Spoiler:--> 
    <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span> 
</p> 

第二個有一個ID以及一個類;

<p class="test" id="answer-one"> 
    <span>Answer Option one</span> 
    </p> 

它爲什麼不起作用？

Answer 1

.test button元素在您追加它之前不存在。相反，你應該添加單擊事件一旦按鈕被追加：

$("#family-question").click(function(){ 
    $("#answer-one").append("<button> Answer One </button>"); 
    $("#answer-two").append("<button> Answer Two </button>"); 
    $(".test").append("<button> Answer Three </button>"); 
    $(".test button").click(function() { // button exists now! 
    $(this).remove(); 
    }); 
}); 

編輯：

一個更好的方法來做到這一點是使用委派。這意味着，被點擊指定的元素時，單擊事件將看看是否有綁定元素中的「按鈕」孩子和點擊事件傳遞給button元素：

$(".test").on('click', 'button', function() { 
    $(this).remove(); 
}); 

這樣做的好處是，你只需要綁定一次該事件，並且button甚至不必存在。