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

Posted 2023-05-08

【中文标题】eModal 在 bootstrap 3 中加载 javascript 但在 bootstrap 4 中不起作用

【英文标题】：eModal load javascript in bootstrap 3 but not working in bootstrap 4

【发布时间】：2021-06-23 23:01:59

【问题描述】：

我在我的 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 电子模态：v1.2.67

【参考方案1】：

我在小提琴上测试它。https://unpkg.com/emodal@1.2.69/dist/eModal.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.jshttps://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/

【讨论】：

我已经阅读了文档，不幸的是在这种情况下我不能使用小提琴，因为模态需要使用 ajax 加载分离视图

您是否使用我发布的 JavaScript 对其进行了测试？我用了你的网址。如果您的模态表单在 DOM 中，您可以使用 message: $(".table").

糟糕，我之前没有包含 useBin 选项，现在可以正常使用了，谢谢。

【参考方案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 现在可以正确加载了