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

渲染后在dom中动态创建节点时必须使用event-delegation：

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

应该有效。