jQuery 제자리에서의 이상한 동작

Question

http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html edit-inplace 플러그인을 사용합니다.

편집 가능한 단일 요소의 경우 잘 작동하지만 프로젝트가 많습니다. 내가 요소를 클릭하면 다음과 같은 상황이 발생합니다

이

실제로 사용 텍스트가 사라집니다. 대신 <input> 요소가 나타납니다. 내가 할 모든

$('th,td').editable(); 

하지만 표는 그래서 DOM에 동적으로로드됩니다 여기에 어떤 문제가 있는지

$('#id').load('template.html', function() { 
    $('th,td').editable(); 
}); 

어떤 생각? 이 문제를 해결하는 방법에 대해 알고 있습니까?

http://jsfiddle.net/2gYw2/6/ (작동하지 않음) - 요소를 추가하고 편집하려면 클릭하고 td 또는 th를 클릭하여 문제를 확인하십시오.

Answer 1

사실 편집 할 수있는 메소드는 한 번만 호출해야합니다. 이 문제를 해결할 수있는 가능성은 2 가지가 있습니다 (해결책이 더 많을 수도 있음).

1. 편집자()로 호출 된 객체를 저장하고 저장합니다.
2. 당신은 내가 사용하는 것이 더 쉽게 찾을 수 있기 때문에 두 번째 솔루션을 선호 jQuery 오브젝트

에 플래그 편집의 전화를 변수를 추가합니다. jquery에 새 함수를 추가하기 만하면됩니다.

는 편집 :

내가는 HTMLElement에 클래스 변수를 대체합니다.

(function($){ 
    $.fn.refreshEditable = function(){ 
     $(this).each(function(){ 
      if(!$(this).hasClass("not-editable")){ 
       $(this).addClass("not-editable"); 
       $(this).editable(); 
      } 
     }); 
    }   
})(jQuery); 


$('th,td,h2').refreshEditable(); 

$('#addTable').click(function(){ 
    $('body').append("<div><h2>Add element</h2></div>"); 
    $('th,td,h2').refreshEditable(); 
}); 

이렇게하는 것이 좋지 않다고 생각되지만 작동합니다. 라이브에있는 예입니다.