부트 스트랩 확인이 동적 요소에 바인딩되지 않았습니까?

Question

페이지에 동적 내용을로드하는 데 AJAX를 사용하는 양식이 있습니다. 또한 요청을 취소하는 기능을 확인하는 데 사용하는 bootstrap-confirmation을 사용하고 있습니다. 이 확인은 페이지가 처음로드 될 때 작동합니다.

이

$(function() { 

    $('[data-toggle=confirmation]').confirmation({ 
     rootSelector: '[data-toggle=confirmation]', 
     popout: true 
    }); 

    $(document).on('submit', '#some-form', function(e) { 
     e.preventDefault(); 

     submitForm(); 
    }); 


    $('.static-element').on('click', '.cancel-request', function() { 
     cancelRequest(); 
    }); 
} 

동적 콘텐츠에 .cancel-request 작품에 대한 클릭 이벤트는, 그러나 확인은하지 않습니다 :

다음은 예제 코드입니다. 클릭 핸들러의 선택기를 document으로 변경하려고 시도했지만 아무런 차이가 없습니다. 확인을 다시 동적 요소에 바인딩하는 방법을 찾지 못했습니다.

cancelRequest()에 콜백을 작성한 다음 bootstrap-confirmation을 다시 초기화했지만 차이가 없습니다. 나는 또한 complete: 옵션 안에 그것을 다시 시도했으나 그것도 작동하지 않았다.

나는 몇 가지 다른 답변 중에서 Twitter BootStrap Confirmation not working for dynamically generated elements을 시도했지만, 내 상황에서는 작동하지 않습니다.

Answer 1

JSfiddle이 JQuery 리스너를 바인딩하는 요소를 제거하고있었습니다. 대체 접근법은 단순히 교체 한 요소를 조작하여 일시적인 요소와 싸울 필요가 없도록하는 것입니다.

//from your JS fiddle at https://jsfiddle.net/6wrb01u6/6/ 
$('[data-toggle=confirmation]').confirmation({ 
    rootSelector: '[data-toggle=confirmation]', 
    // other options 
}); 

$('#replace').on('click', '.do-something', function() { 
    var html = "content"; 
    $.ajax({ 
    url: "/echo/html/", 
    type: "POST", 
    data: html, 
    dataType: "HTML", 
    success: function(data) { 
     $('#replace>span').removeClass('do-something').removeClass('btn-primary'); 
     $('#replace>span').addClass('cancel').addClass('btn-danger'); 
     $('#replace>span').html('Cancel'); 
     $('.content').remove(); 
     $('#replace').append('<p class="content">New content</p>'); 
    } 
    }); 
}); 

$('#replace').on('click', '.cancel', function() { 
    $('.content').remove(); 
});