jQuery: как получить параметр из элемента html, добавленного с помощью .append и обрабатываемого с .on?

Question

Я использую классический обработчик jQuery «.on» для проверки щелчка на каком-то якоре, который я добавил с добавлением.

$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() { 
    //I want to get the "data-pointnumber" and "data-goodanswer" on the clicked element. 
}); 

Проблема здесь состоит в том, что $ (это) дать мне $ («# Селектор к вещи, что-существует»), а не Clicked элемент (это ссылка). Я достаточно ясно?

$.each(this.currentQuestion.Reponse,function (arrayID,rep) { 
    $('#QuestionContainerSingle').find('.liste-boutons').append('<li><a href="" class="button-big btn-rep" data-nbpoints="'+rep.NbPoints+'" data-bonne="'+rep.Bonne+'">'+rep.Texte+'</a></li>'); 
}); 
$('#QuestionContainerSingle').on('click','.btn-rep',function (e) { 
    e.preventDefault(); 
    console.log($(this).attr('data-nbpoints')); 
}); 

Вот HTML ... Как это часть большого приложения, это не так легко извлечь только то, что мне нужно на этот вопрос!

<div class="question-content" id="QuestionContainerSingle"> 
      <div class="header-question"> 
       <p class="intitule"> 

       </p> 
      </div> 
      <div class="content"> 
       <div class="title-box">Find the best answer</div> 
       <ul class="liste-boutons"> 

       </ul> 
      </div> 
     </div> 

Answer 1

Наконец-то я нахожу виновника! Я использую this.btnRep = $ ('. Btn-rep'); в начале моего приложения. Когда я использую

$('#QuestionContainerSingle').on('click',**this.btnRep**,function (e) { 
    e.preventDefault(); 
    console.log($(this).attr('data-nbpoints')); 
}); 

это не работает. Но когда я использую

$('#QuestionContainerSingle').on('click',**'.btn-rep'**,function (e) 

это работает ... Stange!