ブートストラップ確認は動的要素にバインドされていませんか？

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(); 
});