Question

I’m working with Twitter Bootstrap 2.2.2 and jQuery 1.7.2 trying to use anchors with a flat button style as tags. Such tags are dynamically added after saving a text input; I’m using a very simple HTML structure:

<p>
    <a class="btn btn-small"><span>Tag 1</span></a>
    <a class="btn btn-small"><span>Tag 2</span></a>
</p>

With jQuery I just create a new a with the required attributes and values, and it is then attached to the paragraph.

However, whenever you create more than 1, the spacing between elements gets all messed up and new tags are created without spacing between them.

I created the following fiddle to demo my problem: http://jsfiddle.net/marcelo1251/WeuLb/

Click Add Tag more than 2 times and you’ll see the problem…

Is there a way to fix the spacing with the dynamically generated elements?

Thanks,
Marcelo C.

Answer 1

I’ll look into the problem, anyway if you do

 var tagClone = $('.template').html();
    $('p#target').append(tagClone);

it works.

Technically they are not the same:

    //your code
    var tagClone = $('.template').clone(); //tagClone is a jQuery object
    $('p#target').append(tagClone.find('a'));

creates a JQUERY OBJECT and appends it to the target.

    //my code
    var tagClone = $('.template').html(); //tagClone is a string
    $('p#target').append(tagClone);

gets the html content as A STRING and appends it to the target.
The append function (http://api.jquery.com/append/) however can accept either a jquery object or an html string so it should work either way.