jQuery не распознает селектор, созданный методом .html()

Question

Я пытаюсь создать динамическое содержимое. Когда я нажимаю одну кнопку, содержимое коробки изменяется с помощью .html(). Когда я нажимаю другой, содержимое меняется снова.

Это прекрасно, но все, что создано в этом поле, похоже, не может быть выбрано.

Так, например:

$(document).ready(function(){ 

    boxContent1 = "<div class='studySelector'></div>"; 

    $("#caseStudy").on('click',function(){ 
     $("#botBox").hide().html(caseStudy).fadeIn(1000); 
    }); 

}); 

в этом случае содержание #botBox меняется просто отлично. Однако, когда я пытаюсь взаимодействовать с ним

$(".studySelector").on('click',function(){ 
    alert("testing!"); 
}); 

ничего не происходит. Почему это происходит?

Answer 1

Вы должны использовать event-delegation, как динамически создавать узлы в DOM после рендеринга:

$('#botBox').on('click', '.studySelector',function(){ 
    alert("testing!"); 
}); 

должны работать.