敲除data-bind =“ html：html，html click事件内部不起作用

Question

i have html like this :

<div class="row thumbnailrow" data-bind="foreach: data">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 thumbpadding" data-bind="html: HtmlText">

                            </div>
                        <div>

after getting ajax call :

success: function (data) {

        $.each(data, function (i, items) {
            debugger;

            self.data.push(items);
        });
    }

so it will populate the html binding and google chrome output like this :

<div class="row thumbnailrow" data-bind="foreach: MyProfilesData">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 thumbpadding" data-bind="html: HtmlText"><div>
    <div class="pcbtn btnpcedit" data-bind="click: EditProfile" />
                        </div>
                    </div>

so here my click: EditProfile is not working, this event is not fired, when i click on edit button.

Answer 1

The html binding does not process bindings within the inserted HTML. Generally, applying bindings would be unsafe . But if this is something you really want to do, you'll need a custom binding like this:

ko.bindingHandlers.htmlBound = {
    init: function() {
        return { controlsDescendantBindings: true };
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.utils.setHtml(element, valueAccessor());
        ko.applyBindingsToDescendants(bindingContext, element);
    }
};