jQuery 아코디언 입력, 어떻게 아코디언을 닫지 않고 여전히 입력을 제어 할 수 있습니까?

Question

이것은 jQuery로 무엇을 할 수 있고 할 수 없는지 배울 수 있고, 부분적으로 성공한 것입니다.

나는 두 이름과 설명이 될 스팬뿐만 아니라 클릭 수 독립적 버튼 포함 아코디언 생성 (아코디언 즉,이 열리지 않거나 가까이.)

복용 그 개념, 나는 이름과 설명을 텍스트 입력/텍스트 영역으로 바꾸어서 이름과 설명을 편집 가능하도록 만들었습니다. 이것은 상당히 잘 작동했습니다.

그러나 문제는 버튼에 사용 된 것과 동일한 기술을 사용하여 입력 및 텍스트 영역에서 사용할 때 커서를 클릭하면 다른 위치로 커서를 이동할 수 없다는 것입니다. 이 문제를 해결할 방법이없는 것 같습니다.

전혀 작동하지 않는 event.preventDefault()를 시도했습니다. 부분적으로 작동하는 동작을 제공하는 event.stopPropagation()을 시도했습니다. 그리고 stopPropagation과 같은 방식으로 false를 반환했습니다.

누구든지이 문제에 대한 통찰력을 제공 할 수 있는지 궁금합니다.

아래의 jQuery 자바 스크립트가 포함되어 있지만 훨씬 간결한 예제에서는 여기에서 jsfiddle 링크 (http://jsfiddle.net/Rakshasas/xFhN3/)를 제공하여 내가하는 일을 훨씬 명확하게 보여줍니다. 펼치기 위해 아코디언을 클릭하면 스팬이 숨겨지고 입력이 표시됩니다. 입력을 클릭해도 아코디언이 닫히지는 않지만 커서 위치를 지정할 수는 없습니다.

또한 입력에서 텍스트를 변경하려고하면 아코디언을 닫으면 의도 한 결과 인 범위가 실제로 업데이트됩니다. 이것이 나의 개념이 부분적으로 작동한다는 것을 말하는 이유입니다.

감사합니다.

$(function() { 
    $(".accordion").accordion({ 
     header: 'h3', 
     collapsible: true, 
     active: false, 
     change: function(event, ui) { 
      var id = ui.newHeader.find('input:last').val(); 
      $("#status").text(id); 

      ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text()); 
      ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text()); 

      ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val()); 
      ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val()); 

      ui.newHeader.find('div.headerContainer span').hide(); 
      ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show(); 

      ui.oldHeader.find('div.headerContainer span').show(); 
      ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide(); 
     } 
    }); 

    $('input.name, textarea.desc').click(function(event){ 
     event.stopPropagation(); 
    }); 

    $(".delButton").button({ 
     icons: {primary: 'ui-icon-trash'}, 
     text: false 
    }).click(function(event) { 
     //Display user friendly text 
     return false; 
    }); 
}); 

Answer 1

Chrome에서 정상적으로 작동합니다. 브라우저에 따라 다를 수 있습니다.

"는 입력을 클릭하면 아코디언을 닫지 않습니다, 그러나 그것은 또한 당신이 커서의 위치를 ​​허용하지 않습니다"또한

크롬에서 벌금을.

Answer 2

누군가가이 문제를 겪고 있다면, 이것은 나에게 효과가있는 작은 트릭입니다.

문제 : 입력/텍스트 영역 요소와 중첩 JQuery와 아코디언이, 파이어 폭스에서 정상 클릭으로 초점을 얻을 수 없습니다 (당신이 그것에 NO 중첩 아코디언과 JQuery와 아코디언을 사용하는 경우, 모든 작동합니다). 위 사용자가 확인했습니다.

증상은 일반적인 클릭 (왼쪽 클릭)과 관련이 있습니다. 선택적 클릭 (오른쪽 클릭)을 시도하면 요소 (입력/텍스트 영역)에 포커스가 주어집니다. 기묘한.

해결 : 그냥 IExplorer를, 파이어 폭스와 크롬 작업 문서 준비 기능 (내게로) 확인 된

$(function() { 

    //some code ... 

    $("input, textarea").click(function(){ 
     $("input, textarea").blur(); 
     $(this).focus(); 
    }); 

    //more code ... 

}); 

이를 선언합니다.