ansaurus

Question

Answer 1

+3 A:

Might be better to break that up a bit, but you need to start with the element or find it. So you could either:

 $("<div></div>")
        .appendTo("body")
        .append("<span>Click me</span>")
        .find('span')
        .click(function(){
            alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
        });

or

$('<span>Click me</span>')
     .appendTo("body")
     .wrap('<div />')
     .click(function(){
                alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
            });

find and wrap

Edit: regarding OP edit

Keep in mind .add() (http://api.jquery.com/add/) already exists and does what the name implies. Also, something like

var $span = $('<span>click me</span>').click( 
                 function() {
                     alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
                 });
$('<div></div>').append($span).appendTo('body');

will ultimately make your code more manageable and readable

jQuery already has classifying methods to filter and traverse the dom. In your case of the DOM, you could easily use .find('span') to get to the element - or .children('span') - use of good selectors and overall site architecture is important here.

Also, the .end() function is pretty bad-ass:

$('ul').append('<li>test</li><li>test2</li>') // add two li elements
    .children().eq(0).css('background-color', '#ff0000') // change the background of the first child
    .end().css('margin-left', '20px'); //revert to the original data-set (the ul) and change its margin

Dan Heberden 2010-07-07 08:13:25

`add()` alters the set of matched elements, not the DOM, so I'd still need to use any of the other methods (alter creation flow, storage element in a variable, start new subchain or find element after creation). Anyway, I'm accepting this answer because it appears that no native function exists and you provide a good oversight of the alternatives.

Álvaro G. Vicario 2010-07-08 06:56:07

Answer 2

+1 A:

This can be done, by redesigning object creation flow a bit. So, create span, configure it, to handle click, and then append it to body. This is possible, thanks to fluent interfaces of jquery.

$(function(){
$("<div></div>")
    .appendTo("body")
    .append(
    $("<span/>")
        .text("Click me")
        .click(function(){
            alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
        }));
});

Valera Kolupaev 2010-07-07 08:13:48

Answer 3

+1 A:

$(function(){
   $("<div></div>")
       .appendTo("body")
       .append($("<span>Click me</span>").click(function(){
           alert("Clicked on <" + this.tagName + ">, <SPAN> expected");
       }));        
});

jAndy 2010-07-07 08:14:11

ansaurus

tags:

views:

answers:

Get element from latest append() call

Edit: clarification

Edit: solution summary

related questions