0

使用 .live() ：

<input type="button" value="button" />

$(":input[type=button]").live({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
    });

演示：http: //jsfiddle.net/F9gC4

这里委托工作正常。如果我们单击“按钮”或“新建”，将创建新的按钮元素。

使用 .on() ：

<input type="button" value="button" />

$(":input[type=button]").live({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
    });

演示：http: //jsfiddle.net/CB8fh

这里委托不起作用。“新”按钮单击不会创建元素（无法触发）

那么我们如何使用 .on() 多个事件处理程序和委托（未来元素）？

这可能吗？

4

2 回答 2

5

试试这个代码：

$(document).on({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
}, ':input[type=button]');​

要使用已创建/未来的元素进行委派，您需要将事件附加到文档并使用 .on 函数的“选择器”参数来定位事件。未经测试，但理论上应该可以工作！请参阅on 函数的文档，并且live 的文档中有一节关于移动到 .on 函数。

编辑只是想添加，正如@Joy 在他的回答中所说，您不需要附加到document，越接近您委托给的目标元素越好（尽管您需要确保该元素不会受到 ajax/ dom 更改可能会删除事件处理程序）。

于 2012-05-30T12:41:01.640 回答
2

$.on在这种情况下，您必须将事件绑定到父元素

$(document).on({
  click: function() {
        $(this).after('<input type="button" value="new" />');
  },
  mouseover: function() {
        //do something
  },
  mouseout: function() {
        //do something
  }
},':input[type=button]');​

在这种情况下，我绑定到document，您可以绑定到parentdom 中始终存在的任何内容。

工作小提琴

参考：$.on

于 2012-05-30T12:40:03.963 回答