동적으로 추가 된 요소에 .editable()을 적용하는 방법

$ (document) .ready()에서이 javascript를 실행하는 웹 페이지가 있습니다. . editable()은 X-Editable javascript library (장소 편집 중)에서 가져옵니다.동적으로 추가 된 요소에 .editable()을 적용하는 방법

$('tr td:nth-child(2) a').editable();

내 페이지의 링크/버튼을 사용하면 테이블에 행을 추가 할 수 있습니다. 이미 이전과 같은 선택기를 사용하고 모든 일치 항목을 다시 가져 오는 대신 새로운 항목에서 editable()을 수행하는 방법이 있습니까? 당신이 볼 수 있듯이

$('#newCriteria').click(function() { 
    var id = 0; 

    // load template 
    var cTemplate = $('#criteriaTemplate').html(); 

    // fill template 
    var template = cTemplate.format(id, 'New Field'); 

    // attach editable (doesnt work) 
    $('tr td:nth-child(2) a', template).editable(); 

    // append to table 
    $('#criteriaTable').append(template); 
});

, 나는 그렇지 않습니다, 나는 그것을 추가 할 때까지 실제로 DOM의 일부가 아니기 때문에 내가 시도하고 jQuery를에 컨텍스트로 템플릿 HTML을 통과하지만 거라고 생각 작업.

또 다른 가능한 해결책은 선택기를 'tr:last-child td:nth-child(2) a'으로 수정할 수 있다는 것입니다.

요소에 .on()을 사용하여 jQuery에서 자동으로 처리기를 추가해야하는 이유가 있는지 궁금합니다. 이전에 .on()을 사용하여 .on('click', '...', function() {})과 같은 핸들러를 추가 한 적이 있는데, editable()과 같은 것으로 사용할 수 있는지 여부는 알 수 없습니다.

템플릿 : 당신이 테이블 태그에 .editable을 적용 할 수 있도록

<script type="text/template" id="criteriaTemplate"> 
     <tr data-criteriaID='{0}'> 
      <td><i class="icon-remove" /></td> 
      <td><a href="#">{1}</a></td> 
      <td><a href="#" data-value="0">String</a></td> 
     </tr> 
    </script>

출처

2013-03-28 Malcolm O' Hare

당신은 무엇을') (당신의'.editable 실행하려고하면 line * after * .append (template)'줄? – Ian

@Ian 제가하지 않은 가장 큰 이유는 방금 추가 한 ''을 얻고 싶었습니다. 표에 ''이 모두있는 것은 아니 었습니다. –

사실상 마지막 두 문장을 바꾸려고합니다. 실행 :'$ ('# criteriaTable'). append (template); $ ('tr td : nth-child (2) a', 템플릿) .editable();'. DOM을 호출하기 전에 행이 DOM에 있어야한다고 생각하고있다. – Ian

X-편집은 selector 옵션이 있습니다 :

$('#table').editable({ 
    ... 
    selector: 'tr td:nth-child(2) a' 
});

출처

2013-06-01 10:53:02 vitalets

동적으로 추가 된 요소에 .editable()을 적용하는 방법

답변

관련 문제