Question

When I try to click into the generated input-field nothing happens.
The input even lost its focus() and the blur()-event is called.
When I move the cursor with the arrow keys, everything is okay.

An example with the error: http://jsbin.com/atinad/edit
You have to click on the blue square.

I’ve built a menu with links:

<div id="lists">  
    <a href="#" id="list1" rel="1" name="Test #1" class="list  active">
        <span class="text">Test #1</span>
        <span  class="delete"></span>
        <span  class="edit"></span>
    </a>  
    <a href="#" id="list2" rel="2" name="Test #2"  class="list">
        <span class="text">Test #2</span>
        <span  class="delete"></span>
        <span  class="edit"></span>
    </a>
</div>

Clicking on the link set it to an active state.

function InitializeLists() {
    $('div#lists a').each(function() {
        $(this).click(function(event) {
            event.preventDefault();

            $('div#lists a').removeClass("active");
            $(this).addClass("active");

            list.id = $(this).attr("rel");
            list.name = $(this).attr("name");
        });

        $(this).children("span.edit").click(function() {
            list.id = $(this).parent("a").attr("rel");
            list.name = $(this).parent("a").attr("name");
            list.showUpdateNameForm();
        });
        $(this).children("span.delete").click(function() {
            $("#dialog-list-delete").dialog("option", "listid", $(this).parent("a").attr('rel'));
            $("#dialog-list-delete").children('em').html($(this).parent('a').children('span.text').html());
            $("#dialog-list-delete").dialog("open");
            return false;
        });
    });
}

The showUpdateNameForm-function:

list.showUpdateNameForm = function() {
    if (list.name != undefined && list.id != undefined && list.id > 0) {
        var listElement = $('a#list' + list.id);
        var listName = unescape(list.name);

        listElement.children("span.text,span.edit").hide();

        var listElementSave = document.createElement("span");
        $(listElementSave).addClass("save");
        listElement.append($(listElementSave));

        var listElementInput = document.createElement("input");
        $(listElementInput).attr("type", "text").attr("maxlength", 30).val(listName);
        listElement.find("span.text").before($(listElementInput));
        $(listElementInput).focus();
    }
};

The input field is shown correctly and it contains the name of the list.
But I cannot click on it with my mouse. Nothing happens.

First I thought it’s because of the click-event on the <a>-Tag. So I removed only this click-event, but the error still occured. I tried some other stupid things, but nothing worked.
I don’t understand what the problem is.

Can someone reproduce it or does someone see my mistakes?

Answer 1

As zdrsh mentioned, it’s a firefox problem.

I could not solve the problem without changing the structure.
Now I’m using <div>-Tags instead of <a>-Tags and everything is okay.