eModal 在 bootstrap 3 中加载 javascript 但在 bootstrap 4 中不工作

Question

我在我的 codeigniter 项目中使用 eModal 插件来显示带有 ajax
的模态问题是当模式显示 Javascript/jQuery 里面没有加载
javascript 只有在我第二次重新打开模式时才会加载，
我知道我可以将 javascript 代码放在 ajax 回调中，但我并不打算那样做
此代码以前在 bootstrap 3.3.7 中有效，但在 bootstrap v4.3.1

中无效

显示模态函数：

    eModal.ajax({
        title: 'Edit Variant',
        url: "localhost/kb_admin/product/input_variant"
    });

模态视图（模态内部）

alert('script loaded');
$('#form-input-variant').submit(function(){
    alert('form submitted');
    e.preventDefault();
})

<table class="table">
        <form autocomplete="off" id="form-input-variant" method="post">
            <tbody>
                <tr>
                    <th scope="row">Color</th>
                    <td class="text-left">: WHITE</td>
                </tr>
                <tr>
                    <th scope="row">Size</th>
                    <td class="text-left">: L</td>
                </tr>
                <tr>
                    <th scope="row">Price</th>
                    <td class="text-left">
                        <input id="price_variant" name="price_variant" type="text" class="number-format form-control" maxlength="8" placeholder="Enter Price" value="0">
                    </td>
                </tr>
                <tr>
                    <th class="text-center" scope="row" colspan="2">
                        <button type="submit" class="btn btn-primary btn-sm" data-style="expand-right"> Save </button>
                    </th>
                </tr>
            </tbody>
        </form>
    </table>

jquery: v3.31
引导程序：v4.3.1
eModal: v1.2.67

Answer 1

我在 fiddle.
上测试 https://unpkg.com/emodal@1.2.69/dist/eModal.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css 和 jquery 3.3.1

<table class="table">
...your html
</table>

JavaScript

alert('script loaded');
 $('#form-input-variant').on('submit', function(e){
   alert('form submitted');
    e.preventDefault();
});

var options = {
        # For testing
        message: $(".table"),
        # You should use
        url: "localhost/kb_admin/product/input_variant",
        title: 'Edit Variant',
        size: 'lg',
        subtitle: 'smaller text header',
        useBin: true
    };

eModal.alert(options);

看看文档就知道了：http://saribe.github.io/eModal/

Answer 2

好吧，我实际上设法通过更改 eModal.js

自己找到了解决方案

第 375 行

来自

function ok(html) {
            $modal
                .find('.' + MODAL_BODY)
                .html(data.success ? data.success(html) : html);

            return dfd.resolve($modal);
        }

至

function ok(html) {
            $modal
                .find('.' + MODAL_BODY)
                .empty()
                .append(data.success ? data.success(html) : html);

            return dfd.resolve($modal);
        }

我不知道如何，但是模态中的 javascript 现在已正确加载

eModal 在 bootstrap 3 中加载 javascript 但在 bootstrap 4 中不工作

eModal load javascript in bootstrap 3 but not working in bootstrap 4

javascript

php

jquery

modal-dialog

twitter-bootstrap