javascript - 纯js使用ajax加载html和js，但js不起作用

Question

我想使用ajax加载html文件并执行脚本。这是我要加载的 html 文件:

<div class="panel panel-body">
    <h4>Personal Data</h4>
    <hr />
    <span data-bind="editable: firstName"></span>
    <span data-bind="text: firstName"></span>
</div>

<script>
    (function () {
        console.log('lala');

        var viewModel = function () {
            var self = this;
            self.id = ko.observable();
            self.firstName = ko.observable('YZ');
            self.lastName = ko.observable();
            self.gender = ko.observable();

            self.genders = ko.observableArray();
        }
        var vm = new viewModel();
        ko.applyBindings(vm);
    })
</script>

这就是我加载和执行的方式:

Mark.load(t.pathToTemplate, t, function (htmlTemplate, path, option) {
                    var wrap = document.createElement('div');
                    wrap.innerHTML = htmlTemplate;
                    var scripts = wrap.getElementsByTagName('script');
                    if (scripts.length > 0) {
                        var newjs = document.createElement('script');
                        newjs.onreadystatechange = function () {
                            if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
                                cb();
                            }
                        };
                        newjs.onload = function () {
                            cb();
                        };
                        newjs.innerHTML = scripts[0].innerHTML;
                        document.body.appendChild(newjs);
                    }
                    document.getElementById(option.renderIn).innerHTML = htmlTemplate;

                });
Mark.load = function (path, option, callback) {
            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', path, true);
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                    callback(xobj.responseText, path, option);
                }
            };
            xobj.send(null);
        }

加载和追加工作正常，但 js 未执行。如何将该 js 脚本附加或添加到文档中并使用纯 js 执行它？

Answer 1

您正在声明匿名函数，但并未执行它。您需要在函数末尾添加 () 来执行它:

<script>
    (function () {
        console.log('lala');

        var viewModel = function () {
            var self = this;
            self.id = ko.observable();
            self.firstName = ko.observable();
            self.lastName = ko.observable();
            self.gender = ko.observable();

            self.genders = ko.observableArray();
        }
        var vm = new viewModel();
        ko.applyBindings(vm);
    })();
</script>