使用$（）。html时，mdui的一些效果消失了

Question

我正在使用mdui（mdui.org），并且有一个面板功能。

当我把代码放在html体内时，一切都很好。

code

screen

这意味着我可以通过单击箭头打开和关闭面板;

但是，因为修改html / css需要一些参数，我使用$（selector）.html（code）在里面添加一些html：一个id为“table”的表元素

脚本代码是：

<script>

    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100);
    };

    var html = '<thead>\n' +
        '                <tr>\n' +
        '                    <th>Name</th>\n' +
        '                    <th>Buy</th>\n' +
        '                    <th>Sell</th>\n' +
        '                </tr>\n' +
        '                </thead>\n' +
        '                <tbody class="mdui-panel" mdui-panel>';

    var receivedInfo = [{
            "id": 001,
            "cur_price": 10,
            "all_prices": [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            "company_name": "test1",
            "total": 500,
            "dividend": 20,
            "hand_up": 0,
            "sell_remain": 5,
            "buy_remain": 10
        }, {
            "id": 002,
            "cur_price": 100,
            "all_prices": [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            "company_name": "test2",
            "total": 5000,
            "dividend": 200,
            "hand_up": 00,
            "sell_remain": 50,
            "buy_remain": 100
        }]
    ;


       function createDom() {
                $.each(receivedInfo, function() {
                html += '<tr> <td class="mdui-panel" mdui-panel> <div class="mdui-panel-item"> <div class="mdui-panel-item-header"> <div class="mdui-panel-item-title">';
                html += this.company_name + '</div>';
                html += '<div class="mdui-panel-item-summary">Current Price: ' + this.cur_price + '</div>';
                html += '<div class="mdui-panel-item-summary">Now you have: ' + this.hand_up + '</div>';
                html += '<i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-panel-item-body">';
                html += '<p>total: ' + this.total + '</p>';
                html += '<p>dividend: ' + this.dividend + '</p>';
                html += '<p>sell remain: ' + this.sell_remain + '</p>';
                html += '<p>buy remain: ' + this.buy_remain + '</p>';
                html += '</div> </div> </td> <td> <form>';
                html += '<input type="hidden" name=' + this.id + '>';
                html += '<div class="mdui-textfield"> <input class="mdui-textfield-input" type="text" name="amount"> </div> <button type="submit" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Buy </button> </form> </td>';
                html += '<td> <form>';
                html += '<input type="hidden" name=' + this.id + '>';
                html += '<div class="mdui-textfield"> <input class="mdui-textfield-input" type="text" name="amount"> </div> <button type="submit" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Sell </button> </form> </td> </tr>';
                })
                html += '</tbody>';
    };


    $(document).ready(function () {

        createDom();
        $('#table').html(html);
    });
</script>

但结果是，当我点击箭头时，面板无法打开:(有没有解决方案？老实说，当点击箭头时，MDUI让面板打开

Answer 1

当你使用$('#table').html(html);时，表中的Panel实例将被销毁，你需要重新初始化它。

如果您使用mdui-panel属性和MDUI版本> = 0.4.0，请在此行之后调用mdui.mutation() $('#table').html(html);