0

I'm trying to create a dynamic content box. When I click one button, the box's content changes with .html(). When I click another, the content changes again.

This is fine, but anything created within this box doesn't seem to be selectable.

So for example:

$(document).ready(function(){

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

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

});

in this case, the content of #botBox changes just fine. However, when I try to interact with it

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

nothing happens. Why is this happening?

Felix Maxime
  • 2,218
  • 5
  • 31
  • 64

1 Answers1

0

You have to use the event-delegation as you dynamically create nodes in the dom after rendering:

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

should be working.

empiric
  • 7,665
  • 6
  • 39
  • 47