Question

当我尝试点击生成的输入字段时，没有任何反应。输入甚至丢失了焦点（）和模糊（） - 事件被调用。当我用箭头键移动光标时，一切都还可以。

错误示例：http://jsbin.com/atinad/edit 你必须点击蓝色方块。

我已经建立了一个包含链接的菜单：

<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>

点击链接将其设置为活动状态。

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;
        });
    });
}

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();
    }
};

输入字段正确显示，它包含列表的名称。但我不能用鼠标点击它。没有任何事情发生。

首先我认为这是因为<a> - 标签上的点击事件。所以我只删除了这个点击事件，但错误仍然存在。我尝试了其他一些愚蠢的事情，但没有任何效果。我不明白这是什么问题。

有人可以复制它还是有人看到我的错误？

Answer 1

可能错误在函数声明中：

$('div#lists a#list1').each(function() {代替$('div#lists a').each(function() {

Answer 2

正如zdrsh所说，这是一个火狐问题。

如果不改变结构，我无法解决问题。现在我正在使用<div> - 标签而不是<a> - 标签，一切都还可以。

无法用鼠标聚焦输入字段

2 个答案: