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

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

演示: 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()多个事件处理程序与委托(未来元素)？

这可能吗？

Answer 1

试试这段代码:

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

要使委托使用已创建/未来元素,您需要将事件附加到文档并使用.on函数的"selector"参数来定位事件.未经测试,但理论上应该可行!请参阅文件在功能,也为现场的文档,对移动到.对功能的部分.

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