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
  • 2,532
  • 5
  • 37
  • 75

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,825
  • 7
  • 37
  • 48