模板中的模态窗口

时间:2017-03-20 11:45:30

标签: javascript jquery templates vue.js semantic-ui

我按下按钮后必须调用一个模态块。 但是如果模板生成页面内的按钮,则不会调用模态窗口。

    <script type="x-template" id="company-template">
<button class="ui button primary" id="addBtn">Add Form</button>
<!-- it's doesn't work on the rendered page-->
    </script>

如果我没有把按钮放在模板外面,就在页面中。它会起作用。

    <!-- Modal Forms-->
    <div class="ui small modal" id="addCompanyForm">
        <div class="header">Добавить</div>
        <div class="content ui form">
            <div class="field">
                <label>Компания:</label>
                <input type="text" name="companyname" placeholder="название компании">
            </div>
            <div class="field">
                <label>ИНН:</label>
                <input type="text" name="inn" placeholder="ИНН компании">
            </div>
        </div>
        <div class="actions">
            <button class="ui cancel button">Закрыть</button>
            <button class="ui approve button">Сохранить</button>
        </div>
    </div>

<script>
$('#addCompanyForm')
    .modal({
        detachable: false,
        onApprove : function() {

        }
    })
    .modal('attach events', '#addBtn', 'show')
;
</script>

LIBS: jquery,semanticUI,vue

1 个答案:

答案 0 :(得分:0)

据我所知,模态脚本并不了解模板页面元素,因为在vue之前调用了模态脚本。我只是把它放在vue和它的工作之后