javascript - ノックアウトはオブザーバブルを再バインドできません

Question

プログラム内では、Froala リッチ テキスト エディターを使用して、テキストを書き込んだり、画像を配置したりします。また、いくつかの特定の理由により、ko.observable バインディングでタグを作成し、すべてを Drupal に送信し、直前のバインディングでタグを消去します。提出します。この情報を Drupal から再び取得できるようになった後 (このバインディングのタグはもうありません)。したがって、この情報を再度編集するために、同じバインディングを再度作成します。ただし、今回はこのバインドが機能しなくなりました。以下のすべての JavaScript コードを単純化しました。

$(document).ready(function() {  
    function create_image_table() {
        if (!document.getElementById("img_div0"))
            $('<div id="img_div0" style="border : 1px solid black;  width=80%"  class="asd row"/>').appendTo(document.getElementsByClassName("fr-element fr-view")[0]);
        $('<div id="ilk0" class="my_ilk col-sm-6" contenteditable="false"/>').append($('<div id="caption0" style="font-weight:normal; height: 50px;" data-bind="text: captionName0" data-toggle="modal" data-target="#myModal" class="caption_class"  contenteditable="false"/>')).appendTo($("#img_div0"));    
    }
    function create_image_observables(){
        myViewModel['captionName0'] = ko.observable('CAPTION : ');
        ko.applyBindings(myViewModel,document.getElementById('caption0'));
    }
    var myViewModel = {
        edit_fields : function() {
            this.captionName0('CAPTION : ' + document.getElementById('caption_input').value);
        } 
    };
    ko.applyBindings(myViewModel);
    document.getElementById("editor_content_button").addEventListener("click", submit);

    var images = document.getElementsByClassName("asd row");
    for (j=0;j<images.length;j++) { 
        create_image_table(0, "");
        create_image_observables(0, "","","","","");    
    }
    function submit () {
        create_image_table(0, "");
        create_image_observables(0, "", "", "", "", "");
        var content_to_send = document.getElementById("img_div0").parentNode.innerHTML.replace(/&lt;/g,"<"); 
        $.ajax({
            type: "POST",
            dataType: 'json',
            data: {mycontent: content_to_send, title: "", author: "" },
            url: "submit_2.php",
            success: function(response) {
                if(response > 0) { 
                    window.location = ($(this).attr('href') + 'rte_2.php?id='+response).replace("undefined","") ;
                }
            }
        });
    }
    $(function() {
        $('div#froala-editor').froalaEditor({toolbarButtons: ['undo', 'redo' , '|', 'bold', 'italic', 'underline', '|' ,'fullscreen', 'inlineStyle', '|', 'insertLink', 'paragraphFormat','|', 'insert','insertHTML'],})    
    });
});

これらのタグを消去するために、submit_2.php で次を使用します。

$tags= $xpath->query('//div[contains(@id,"ilk")]');

foreach ($tags as $tag) {   
    $tag->parentNode->removeChild($tag);    
}

次に、Drupal からすべての情報を取得し、以前と同じ形式で再度表示します (再度バインディングでタグを追加します)。しかし、バインディングはその観察可能な機能を失いました。

また、submit_2.php で消去する代わりに、submit 関数内で cleanNode および removeNode 関数を使用してみましたが、再び同じ結果が得られました。どうすればこの問題を解決できますか? 前もって感謝します。