7

I have two <div> elements, and the following JavaScript code:

var myObject = {
    $input: $('<input />'),
    insert: function () {
        $('div').append(this.$input);
        $('div').append(' ');
    }
};

myObject.insert();

This, as I expect, produces an <input> element within each of the two <div> elements.

Now when I create a new instance of myObject and call insert() again I will be expecting 4 <input> elements, two in each <div>. Weirdly, I only get 3 <input> elements!

See example code here: http://jsfiddle.net/FNEax/

Improve this question
2
  • 2
    even two lines of my myObject.insert(); still only creates 3 inputs, interesting. Commented Aug 2, 2011 at 19:51
  • The first call is what I would classify as strange. You're trying to append a single instance of $('<input>') in two places. The second append should move it, not clone it (which is what I believe it to be doing in the second call). The first call is, for some reason, cloning it (or so it seems). Commented Aug 2, 2011 at 19:59

5 Answers 5

Reset to default
12

You're creating 1 input explicitly:

$input: $('<input />',{value:i}),

...but cloning it implicitly when you try to append it to multiple divs

// 2 divs
$('div').append(this.$input);

Then Object.create doesn't create a new $input, so on the second pass, it appends (moves) the input from the second div (which is actually the original) to the first div, and then does the implicit clone to populate the second.

Here's a jsFiddle example that increments an i variable whenever insert() is called, and adds it as the value of the input. Notice that it is always set at 0.

I also modified it to pass a string to insert so you can see which call each input came from.

The two inputs from the second call both still have the string passed to the first call.

EDIT:

I flipped it around mid explanation, but the concept is the same.

When the second insert() is called, the clone is first created of the original and added to the first div, then the original is appended to the second div (where it already is).

jQuery makes the clones first, then appends the original last.

Here's another jsFiddle example that adds a custom property to the original, then adds some text next to the element with that custom property after each insert(). The text is always added next to that original in the second div.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

+1 for a different explanation of the same issue I was trying to describe.
Why doesn't Object.create create a new $input? Shouldn't every jQuery call $('<input />) create a new object?
@Randomblue: Yes, each jQuery $('<input />) call creates a new object, but when you pass the original object to Object.create() it is simply making a duplicate object by copying the property values of the original into identical properties on the new object. The value of myObject.$input is a reference to the jQuery that was created. So Object.create() is simply copying over that reference to the original jQuery object into the new one. As such, the $input property of the resulting object is referencing the original jQuery object. I'll give a short example in a second.
@patrick: I think I got it, thanks! [Although an example would be nice!]
@Randomblue: Sure thing. :o) Here's the example. The original object references an Array. then a new object is created from the original using Object.create. After that, a new value is .push()'d into the Array by referencing the array form the original object. Logging to the console, the new value shows up in both because it's the same Array. Anyway, sounds like you've got a handle on it. ;o)
|
3

This is what is happening. From the jQuery docs:

If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned)

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

So the first time around, since your input isn't anywhere in the DOM it is cloned and inserted into both divs. But, the second time it is called it is removed from the second div, before being cloned and added back into both divs.

At the end of your code, the first div contains both inputs, but the second div only contains the most recent input, since each input was removed from your last div.

http://jsfiddle.net/hePwM/

Improve this answer

1 Comment

+1 "the second time it is called it is removed from the second div". That's the eureka moment
2

Once an element is inserted into the DOM, another .append() call with it as the appended content causes it to move within the DOM (docs). Your code creates a jQuery collection with a single input therein, which input has yet to be appended to the DOM. So the first call to insert() appends it to each (using the cloning or copying mechanism internal to jQ).

In the second call, however, this.$input references something which is already in the DOM (due to the first call). Internally, jQuery is each-ing the collection of DIVs and appending the input which lives inside of this.$input. So it adds it, the moves it.

The primary issue is that you're re-appending the same input over and over. Remember that JavaScript generally references existing objects rather than make new ones. That same input element keeps getting re-referenced.

If you want a method to add an input to every DIV, you should simply pass the input markup into append:

$( 'div' ).append( '<input />' );
Improve this answer

4 Comments

Hum. So why do we get 2 <input> boxes when insert() is called only once?
Since the initial call was referencing an element which was not already in the DOM, it was copied to each, as far as I can tell.
I don't understand why the same input element keeps getting re-referenced. Doesn't every jQuery call $('<input />') create a new object?
Yes, eac call creates a new collection with a new input. But you only call it once...
2

The wierd behavior is due to the fact you are using a JQuery collection where you shouldn't be. How it even worked in the first place is beyond my skillset.

var myObject = {
input: '<input />',
insert: function () {
    $('div').append(this.input);
    //$('div').append(' ');
}
};
Improve this answer

Comments

0

try each():

var myObject = {
    insert: function () {
        $('div').each(function(index) {
            $(this).append($('<input />'));
            $(this).append(' ');
        });
    }
};

myObject.insert();
myObject.insert();
Improve this answer

1 Comment

That this works is not due to using .each(), it's due to re-executing the creation of the input inside of .append() rather than reference the previous collection.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.