Question

在JSFiddles中测试Bootstrap表时，我想这样做，以便当我单击表中的按钮时按钮将消失并被普通文本替换。以下是标记的相关部分：

<tbody>
        <tr>
            <td>John Doe</td>
            <td>my@gmail.com</td>
            <td><button class="disabled" data-bind="click: dosomething.bind($data, 'was', 'sup')" type="button" class="btn btn-warning">Crear Cuenta</button></td>
        </tr>
</tbody>

因此，使用KnockoutJS将事件绑定到单击按钮时，我执行了以下操作：

function ViewModel() {
    var self = this;

    self.dosomething = function (data, event, param1, param2) {
            var $stuff = $(param2.target).prop("disabled",true);
        var $stuff2 = $(param2.target).hasClass("disabled");
        var $stuff3 = $(param2.target).parent();
        $(param2.target).parent().empty();
        $(param2.target).parent().html("hello");
    }

    self.donext = function(){
            var $stuff = $(".disabled").prop("disabled",false);
    }
}

var app = new ViewModel();
ko.applyBindings(app);

但是，hello根本不会呈现。但是，当我删除$(param2.target).parent().empty();行时，按钮将被我最初想要的hello替换。如果.empty()仅删除子内容，为什么我之后无法添加html内容？

Answer 1

声明

    $(param2.target).parent().empty();

清空父元素中的所有内容。如果你从其他（子）元素的父元素中清空所有内容，你认为孩子会发生什么？对：它已经消失了。因此，后续尝试设置.html()内容将不起作用，因为父级不再是父级。

您可以使用父元素中的链接：

    $(param2.target).parent().empty().html("hello");

这是有效的，因为对.empty()的调用返回包装父项的jQuery对象。在您的代码中工作的内容是从（不再）子元素开始的。

为什么我在使用.empty（）后无法将Html插入DOM元素？

1 个答案: