Home/ Questions/Q 7614347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T02:22:53+00:00

The following code snipplet shows what my issue is: var $div = $(‘<div>’); $(‘span’).live(‘click’,

  • 0

The following code snipplet shows what my issue is:

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

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

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

$div.appendTo('body');
​

This works as expected in jQuery 1.6.x but not in 1.7.x

Why is it not working in 1.7.x? Is it a bug? Is there any way to get it to work in 1.7.x?

EDIT: .on doesn’t change anything!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way that event handling works has changed in the 1.7 release. Before the <span> is added to the DOM, events triggered on it will not bubble up to the <body> as they once did (erroneously, in my opinion; the 1.7 behavior makes much more sense).

    The triggering of the event on the <span> probably works, but because the event does not bubble to the <body> the actual handler that deals with your .live() setup cannot be called.

    edit — it may be the document element to which events bubble; whatever, the point is the same.

    edit again — Here’s a way to make this work so that you can trigger handlers before adding your elements to the DOM:

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

    That sets up the “click” handler as a delegated handler on the nascent <div> directly. Then, after appending the new <span> to that element, it’s then possible to trigger a “click” on that <span> and have the handler be called. That happens before the whole thing is appended to the <body>.

    • 0