Question

以下代码snipplet显示了我的问题：

var $div = $('<div>');

$('span').live('click', function() { this.innerHTML = 'changed'; });

$div.append(
    $('<span>span</span>').click()
);

$div.appendTo('body');

这在jQuery 1.6.x中按预期工作，但在1.7.x

中没有

为什么它在1.7.x中不起作用？这是一个错误吗？有没有办法让它在1.7.x中运行？

编辑：.on doesn't change anything!!

Answer 1

1.7版本中事件处理的工作方式发生了变化。在将添加到DOM之前，在其上触发的事件不会像以前那样冒泡到<body>（错误地，在我看来，1.7行为更有意义）。

在上触发事件可能有效，但由于事件没有冒泡到<body>，因此无法调用处理.live()设置的实际处理程序。

编辑 - 它可能是事件冒泡的文档元素;无论如何，重点是相同的。

再次编辑 - 这是一种方法，使您可以在将元素添加到DOM之前触发处理程序：

$('<div></div>').on('click', 'span', function() {
    this.innerHTML = "Changed!";
}).append($('<span>span</span>'))
  .find('span').click().end()
  .appendTo($('body'));

将“click”处理程序设置为新生<div>直接上的委托处理程序。然后，在将新附加到该元素之后，然后可以触发上的“点击”并调用处理程序。这是在将整个事物附加到<body>之前发生的。

Answer 2

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。

http://api.jquery.com/live/ （正如评论者所指出，这仍然适用于jQ 1.7）

要编辑：

试

var $div = $('<div>');

var span = $('<span>span</span>');
span.click(function() {
    this.innerHTML = 'changed'; 
});

$div.append(
    span.click()
);

$div.appendTo('body');

http://jsfiddle.net/3BTaz/3/

Answer 3

1.6和1.7的工作解决方案

var $div = $('<div>');
$('span').live('click', function() { this.innerHTML = 'changed'; });
$div.append('<span>span</span>');
$div.appendTo('body');
$('span').trigger('click');

Demo

但是，省略使用已弃用的功能将live替换为on

的风险

$('span').on('click', function() { this.innerHTML = 'changed'; });

Answer 4

您将.click()的结果传递给.append()。这里有趣的是它在1.6中工作，因为你的函数没有返回任何内容。这可能是由于.live工作方式的内部变化，或.click如何调用其听众。

Notice how this works in 1.7

var $div = $('<div>');

$('span').live('click', function() { this.innerHTML = 'changed'; });

$div.append(
    $('<span>span</span>')
);

$div.appendTo('body');
$('span').click();

为什么这会破坏jQuery 1.7.x？

4 个答案:

Demo