マウスで入力フィールドをフォーカスできません

Question

生成された入力フィールドをクリックしようとすると何も起こりません。 入力でもfocus（）が失われ、blur（）イベントが呼び出されました。 カーソルを矢印キーで移動すると、すべてが問題ありません。

エラーのある例：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機能：

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

、それはFirefoxの問題です。

構造を変更せずに問題を解決できませんでした。 今、の代わりに<div>タグを使用しています。タグとすべては問題ありません。

Answer 2

たぶんエラーは関数の宣言である：言及zdrshとして

$('div#lists a#list1').each(function() {代わりの$('div#lists a').each(function() {