Bug Tracker

Opened 11 years ago

Closed 10 years ago

#3940 closed enhancement (fixed)

after() and before() fail after newly created jquery elements

Reported by: Larry Battle Owned by: aflesler
Priority: minor Milestone: 1.4
Component: core Version: 1.3.2
Keywords: after() and before() Cc:
Blocked by: Blocking:

Description

I have notice that the after() and before() functions fail after a statement like $("<tag/>") has been made.

When trying to create the following format, anything inside after() is before() are not created.

Desired.

<span>Some </span> <b>more</b>

Code.

$("<span/>").text("Some ").after( "<b>more</b>" )

$("<span/>").text("more").before( "<b>Some </b>" )

Result. <span>Some </span> or nothing after()

<span>more</span> or nothing before()

Link to example:

http://jsbin.com/ivido

Change History (6)

comment:1 Changed 11 years ago by dmethvin

Owner: set to aflesler

The before() and after() methods expect that they will be used on elements that are already in a DOM document--the element needs a parentNode. I actually see an error in Firebug for the example above.

The cases you have above can be easily expressed as a single html string; was this a test case for a more complex situation?

I'd be inclined to just document this limitation; it's messy to fix. You'd need to inject new elements into the jQuery object and would probably need to pushStack since you're changing the object's internal state.

comment:2 Changed 11 years ago by Larry Battle

I am just a little disappointed because append() works with newly created variable elements but after() does not. My real task was something similar to the following.

var form = $( '<form/>' ); form.append(

$( "<input type='radio'" ).attr( 'value','1' ).after( $( '<label/>' ).text('true') ) .after(

$( "<input type='radio'" ).attr( 'value','0' ).after( $( '<label/>' ).text('false') )

)

);

But I think that using a string statement will be best. Thank you for your reply.

comment:3 Changed 11 years ago by john

Resolution: wontfix
Status: newclosed

Larry, in your case you should just do:

var form = $('<form/>').append(
    $("<input type='radio'/>").attr('value','1'),
    $('<label/>').text('true'),
    $("<input type='radio'/>").attr('value','0'),
    $('<label/>').text('false')
);

I've added notes to all the documentation pages so I'm closing this bug now.

comment:4 Changed 11 years ago by Larry Battle

That was the solution I was looking for. Thanks, john!! However, if you could, could you include that example into the documentation somehow? I didn't realize that append() and other functions could take arrays of jQuery objects like that.

So..

The elements must already be inserted into the document (you can't insert an element after another if it's not in the page).

Would look better as..

The elements must already be inserted into the document (you can't insert an element after another if it's not in the page).

The following will work.

var form = $('<form/>').append(
  $("<input type='radio'/>").attr('value','1'),
  $('<label/>').text('true')
);

But this will not.

var form = $('<form/>').append(
  $("<input type='radio'/>").attr('value','1').after(
    $('<label/>').text('true')
  )
);

comment:5 Changed 10 years ago by john

Milestone: 1.3.11.3.3
Resolution: wontfix
Status: closedreopened
Type: bugenhancement
Version: 1.31.3.2

comment:6 Changed 10 years ago by john

Resolution: fixed
Status: reopenedclosed

Fixed in SVN rev [6553].

Note: See TracTickets for help on using tickets.