Skip to main content

Bug Tracker

Side navigation

#3940 closed enhancement (fixed)

Opened January 21, 2009 03:15PM UTC

Closed September 14, 2009 10:09PM UTC

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

Attachments (0)
Change History (6)

Changed January 22, 2009 02:36AM UTC by dmethvin comment:1

owner: → 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.

Changed January 22, 2009 04:07AM UTC by Larry Battle comment:2

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.

Changed February 18, 2009 01:32PM UTC by john comment:3

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.

Changed February 23, 2009 03:04PM UTC by Larry Battle comment:4

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

Changed September 14, 2009 10:08PM UTC by john comment:5

milestone: 1.3.11.3.3
resolution: wontfix
status: closedreopened
type: bugenhancement
version: 1.31.3.2

Changed September 14, 2009 10:09PM UTC by john comment:6

resolution: → fixed
status: reopenedclosed

Fixed in SVN rev [6553].