이벤트 수신기를 추가 한 후 Footable jQuery 플러그인 아이콘이 누락되었습니다.

Question

반응 형 테이블을 만들기 위해 jQuery 플러그인 'Footable'을 사용합니다. 일반적으로이 플러그인은 행이 확장되거나 축소 될 때 모든 행의 모든 ​​첫 번째 열에 아이콘을 추가합니다. 이 작업은 테이블 내부에서 클릭 할 수있는 버튼을 확인하는 이벤트 리스너를 추가 할 때까지 잘 수행되었습니다.

데이터가 Ajax로로드 된 후 내 테이블이 jQuery에 의해 결합됩니다. 내 jQuery는 다음과 같습니다.

// My table 
var table = $('<table/>', { 
    class: 'footable table toggle-circle' 
}); 

// My button, which gets appended to a table cell 
removeLink = $('<a/>', { 
    'class': 'row-delete', 
    'href': '#' 
}).text('Remove'); 

위의 코드는 멋진 테이블을 구성합니다. 나는 (완벽하게 정상적으로뿐만 아니라 작동하는) 내 코드에 다음 이벤트 리스너를 추가 한 후 그러나, Footable의 아이콘은 더 이상 (여전히 작동 확대 및 축소) 표시되지 않습니다 :

// Listen to clicks 
$('#response').footable().on('click', '.row-delete', function(e) { 
    /* Stuff to do here. It doesn't matter what I put here, 
    */ even when it's empty icons are dismissed. 
} 

테이블 자체를 아약스에 의해로드 언급 될 때 완료시 다음 코드로 Footable 플러그인을 초기화하는 호출 아이콘이없는 이유

$(function() { 
    $('.footable').footable(); 
}); 

이뿐만 아니라 내가 이해하지 않지만, 이벤트 리스너를 추가하는 플러그인 출력과 놨 이유도 이해할 수 없다 ~로 시작하십시오. 나는 무엇을 놓치나요?

Answer 1

FooTable 자신의 문서를 웹 페이지를 설정하는 방법은 관련 코드는 찾기 어렵고 링크를 만드는, 그래서 내가 여기 (약간 수정) 버전 복사합니다 :이 경우

$('#response').on('click', '.row-delete', function(e) { 
    e.preventDefault(); 

    //get the footable object 
    var footable = $('.footable').data('footable'); 

    //get the row we are wanting to delete 
    var row = $(this).parents('tr:first'); 

    //delete the row 
    footable.removeRow(row); 
}); 

을 .footer 동적 그래서 우리는 #response 래퍼에 리스너를 추가합니다.