전체 div를 편집 가능한 양식으로 변환 할 수 없습니다.

Question

기본 정보 div가 있습니다. 사용자가 편집 버튼을 클릭하면 편집 할 수있는 버튼이 있습니다. 기본 정보 div가 양식으로 변환됩니다. 나는 Jeditable을 사용하고있다! 이 일을 위해서. 하지만 문제는 사용자가 편집 단추를 클릭 할 때 JavaScript 함수가 호출 된 다음 편집 가능한 필드를 클릭해야하지만 한 번의 클릭으로 양식을 볼 수 있어야합니다. 각 필드를 클릭하고 이동하지 않아도됩니다.

  // alert('ready'); 
     alert("I Got That All!!!"); 
     $('#name1').editable(' ' 
     ); 
     $('#name1').editable('enable'); 
     $('#BG1').editable(' ', 
     { 
      data: " {'1':'O+','2':'O-','3':'A+','4':'A-','5':'B+','6':'B-','7':'AB+','8':'AB-','selected':'1'}", 
      type: 'select' 
     } 
     ); 
     $('#BG1').editable('enable'); 
     $('#DOB2').editable(''); 
     $('#DOB2').editable('enable'); 
     $('#MS1').editable(' ', 
     { data: "{'1':'Single','2':'Married','3':'Engaged','selected':'1'}", 
      type: 'select' 
     } 
     ); 

Answer 1

다음과 같다 자바 스크립트 메소드의 코드는 당신은 사용자 정의 event에 편집을 연결해야 custom.editable 말을하고 편집 버튼을 사용자가 클릭 (이 ID가`#입니다 말할 때 그 같은 이벤트를 트리거 편집 ')

$('#edit').on('click', function() { 
    $('.editable').trigger('custom.editable'); 
} 

와 같은 당신의 편집 가능한 영역을 구성

$('.editable').editable('... path ...', { 
    event: 'custom.editable' 
    ... more config ... 
} 

이 바이올린을 참조하십시오 http://jsfiddle.net/f2akB/