Question

使用.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
      }
    });

DEMO： 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
      }
    });

DEMO： http://jsfiddle.net/CB8fh

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

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

这可能吗？

Answer 1

试试这段代码：

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

对于使用created / future元素的委托，您需要将事件附加到文档并使用.on函数的'selector'参数来定位事件。没有经过测试，但理论上应该可行！请参阅the on function的文档，the documentation for live还有关于转移到.on函数的部分。

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

Answer 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，您可以绑定到dom中始终存在的任何parent。

Working Fiddle

参考：$.on

为什么.on（）在使用多个事件处理程序时不支持委托（future元素）？

2 个答案: