javascript - jQuery在2个动态生成的层下触发事件

Question

我一直在使用 jquery 使用 on、delegate 等在动态生成的文本字段上触发事件，正如 this answer. 中所述。这工作得很好，但是当我尝试添加另一个动态生成的层时，我无法触发该操作。例如

将人员动态添加到列表中即可

| People List
|
| 1) Name _______
|
|  ---------------------
| |Click to add a person|
|  ---------------------
|

如果我想动态地将人员添加到列表中并在每次焦点位于文本框时触发警报，则以下内容可以很好地实现

$('div.people-list').delegate('input.name', 'focusin', function(){
  alert("textbox focusedin");
});

当我有一个列表列表时，问题就来了。假设我想要一个包含多辆公共(public)汽车的动态列表以及多个乘客的动态列表。如下所示。

| Bus List
|
|  1)  Bus ID_______
|   
|   | Passenger List
|   |
|   | 1) Name _______
|   |
|   |  ---------------------
|   | |Click to Add a Person|
|   |  ---------------------
|
|  ------------------
| |Click to Add a Bus|
|  ------------------

在这种情况下，我上面使用 delegate 的 javascript 似乎还不够。我需要添加什么来触发这种嵌套的事件？

即使它很重要(尽管我不认为它会)，我还是使用 Rails 和 Cocoon gem 来实现场动态。

Answer 1

由于您是动态添加控件，因此如果您使用 document 引用它们来委托(delegate)给它们，那就太好了。所以你可以尝试下面的代码。

$(document).delegate('input.name', 'focusin', function(){
  alert("textbox focusedin");
});