Question

I have a page where you can click a link that says “add a keyword” and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the “return” key. However, I’ve been adding onto it to allow for an “autocomplete” feature, so I’m trying to insert a

<ul></ul> 

after my input in order to do a .load inside the list.

The relevant code I have is:

var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
    $(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
    $('.add_keyword').focus();
    addKeywordId++;
});

The problem is, that my HTML structure ends up looking like this:

<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />

INSTEAD OF

<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>

Anybody know why my HTML is added out of the order I specified??

Thanks

EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. 🙁

Answer 1

This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I’ve seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.

You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.

$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');

Happy haxin.

_wryteowl