마우스로 입력 필드를 포커스 할 수 없습니다.

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> -Tag의 클릭 이벤트 때문이라고 생각했습니다. 따라서이 클릭 이벤트 만 제거했지만 오류가 여전히 발생했습니다. 나는 다른 어리석은 것들을 시도했지만 아무 일도 없었다. 문제가 무엇인지 이해하지 못합니다.

누군가 그것을 복제하거나 내 실수를 볼 수 있습니까?

Answer 1

$('div#lists a').each(function() {의, 그것은 파이어 폭스의 문제입니다.

구조를 변경하지 않고도 문제를 해결할 수 없습니다. 이제 대신에 <div> -Tags를 사용합니다. 태그와 모든 사항이 정상입니다.

Answer 2

은 아마 오류가 함수의 선언에 있습니다

$('div#lists a#list1').each(function() { 대신 zdrsh가 언급 한 바와 같이