Knockout data binding failed - Codes Helper - Programming Question Answer

error using Knockout for data binding

Interface effect: when tab pages are switched, ajax is used to get pages dynamically. Use seajs to manage js.
the first click to check the tab binds correctly, but the second click to check the tab makes an error. Console didn"t report it wrong.
what is the reason for this? has anyone encountered it?

tab Page Code:
html Code

<style>
    *{ margin: 0; padding: 0}
    .container{padding: 10px; }
    ul,li{ list-style: none}
    .tab-list{overflow: hidden;  zoom: 1;   border-bottom: none;  z-index: 110; display: block; border-left: solid 1px -sharpd1d1d1;}
    .tab-list li{ height:40px; line-height: 40px; padding: 0 20px; float: left; text-align: center;  border-top: solid 1px -sharpd1d1d1;
        background: -sharpd1f0f4; border-right: solid 1px -sharpd1d1d1; color: -sharp666;}
    .tab-list li.active{ font-weight: bold; color: -sharp4ccacb; border-top: solid 2px -sharp4ccacb; background: -sharpfff; height:39px; line-height: 39px;}
    .tab-content{
        border: solid 1px -sharpd1d1d1;
        width:80%;
        height:600px;
    }

</style>

<div class = "container" >
    <ul class="tab-list">
        <li class="active" data-url = "/tab1"></li>
        <li data-url = "/tab2"></li>
        <li data-url = "/tab3"></li>
        <li  data-url = "/tab2"></li>
        <li  data-url = "/tab2"></li>
    </ul>
    <div class = "tab-content" id = "tabContent"></div>
</div>

<script type = "text/javascript">
    $(function(){
        seajs.use("{dir}/test", function(a){
            a.init();
        });
    });

</script>

js Code

/**
 * tab
 */
define ( function ( require, exports, module ) {
    var internal = {
        //
        init : function () {
            internal.bindEvent ();
            $ ( ".tab-list" ).find ( "li:first" ).trigger ( "click" );
        },
        //
        bindEvent : function () {
            $ ( ".tab-list" ).find ( "li" ).on ( "click", function () {
                $ ( this ).addClass ( "active" ).siblings ( ".active" ).removeClass ( "active" );
                var dataUrl = $ ( this ).attr ( "data-url" );
                internal.loadUrl ( dataUrl );
            } );
        },
        //ajax
        loadUrl : function ( url ) {
          $.ajax({
                url : url,
                dataType : "html",
                type : "post",
                success : function(data){
                    $ ( "-sharptabContent" ).html ( data );
                }
            });
       }
 
    };
    exports.init = function () {
        internal.init ();
    };
} );

check the code corresponding to the tab page:
html:

<div class = "container" id = "testCtn">
    :<label data-bind="text:cc"></label><br />

</div>

<script type = "text/javascript">
    $(function(){
        seajs.use("{dir}/tab3", function(a){
            a.init();
        });
    });

</script>

js:

/**
 * tab
 */
define(function (require, exports, module) {

        var internal = {
            myViewModel : {
                cc : ko.observable("123")
            },
            //
            init : function(){
                ko.applyBindings(internal.myViewModel, document.getElementById("testCtn"));
            }

        };

    exports.init = function () {
        internal.init();
    };


});