tags:

views:

41

answers:

2

I've got this form working, but according to my previous question it might not be supported: it isn't in the docs either way -- but the intention is pretty obvious in the code.

$(".section.warranty .warranty_checks :last").after(
  $('<div class="little check" />').click( function () {
      alert('hi')
  } )
  , $('<span>OEM</span>')  /*Notice this (a second) argument */
);

What this does is insert <div class="little check"> with a simple .click() callback, followed by a sibling of <span>OEM</span>. How else can I write this then? I'm having difficulty conjuring something working by chaining any combination of .after(), and .insertAfter()?

I would expect this to work, but it doesn't:

$(".section.warranty .warranty_checks :last").after(
  $('<div class="little check" />').click( function () {
      alert('hi')
  } ).after ( $('<span>OEM</span>')  )
);

I would also expect this to work, but it doesn't:

$(".section.warranty .warranty_checks :last").after(
  $('<span>OEM</span>').insertAfter(
    $('<div class="little check" />').click( function () {
       alert('hi')
    } )
  );
);

-> Please see my jsfiddle for examples (test case)

A: 

Well your code works for me if I change it to

$(".section.warranty .warranty_checks :last").after(
  $('<div class="little check"></div>').click( function () {
    alert('hi')
  } )
  , $('<span>OEM</span>')  /*Notice this (a second) argument */
);

Notice the <div class="little check"></div>. What does <div class="little check" /> do anyway?

realshadow
notice what `.`? That is still `.after( content, content )`, which is what I'm trying to avoid because it is not said to be supported.
Evan Carroll
I edited it a bit :)
realshadow
`<div class="little check" />` is an empty styled element ``.little.check { width:3em; height:3em; border:1px solid black; ... }` with an event on `.click()`. And, this is still `.after( content, content )`. Please read the [referenced post](http://stackoverflow.com/questions/2932549/what-is-the-status-of-jquerys-multi-argument-content-syntax-deprecated-support).
Evan Carroll
+1  A: 

This may be the naive answer:

$(".section.warranty .warranty_checks :last").after(
    $('<span>OEM</span>')
).after(
    $('<div class="little check" />').click( function () {
     alert('hi')
    }
);

Seems to work...

EDIT: have I missed the point here? http://jsfiddle.net/wFx9Z/

Ryley
I see what is happening, you're doing `$(...).after().after()`, I'm doing `$(...).after( $().after() )`, and mine isn't working because it is not in the document yet. Nifty.
Evan Carroll