jquery - 无法理解如何正确使用 .on

Question

可能是一个愚蠢的问题，但对 JQuery 来说仍然是新的。

我有一个 div 作为一个按钮来通过 .load 加载内容，问题是我在 JS 中加载的任何内容都无法正常工作。

HTML：

<div class="a" id="aa">Button #1</div>
</br>
</br>
<div id="loada"></div>
</br>
</br>
<div id="loadb"></div>

JS：

$(document).ready(function(){
  $('#aa').click(function(){
    $('#loada').load('load.htm #bb');
});
  $('#bb').click(function(){
    $('#loadn').load('load.htm #cc');
});

});

加载 HTM：

<div class="b" id="bb">Button #2</div>
<div class="c" id="cc">Content #1</div>

我知道您需要对已加载的 JS 使用 .on 来处理动态创建的 HTML，但是我似乎无法正确处理。

有谁能帮忙吗？

编辑：下面有什么问题？

$('#bb').on('click', '#bb', function(event){
  $('#loadb').load('load.htm #cc');
});

Answer 1

$("#selector").on("click", function(event){
});

委托事件方法仅将事件处理程序附加到一个元素

 $("#selector").on("click", "selector", function(event){

    });

Answer 2

您可以尝试像这样单击加载的回调函数：

$(document).ready(function(){
  $('#aa').click(function(){
    $('#loada').load('load.htm #bb',function(){
        $('#bb').click(function(){
            $('#loadb').load('load.htm #cc');
        });
    });
});

Answer 3

    $(document).ready(function(){
      $('#aa').on("click",function(){
        $('#loada').load('load.htm #bb');
           $('#bb').on("click",function(){
                   $('#loadn').load('load.htm #cc');
                 });
          });
    });

if you are using jQuery 1.9 use "on" , if using older version use "live". [live is deprecated remember.]