Question

使用Javascript生成的元素打开Bootstrap 4模式时遇到问题。有两个非常相似的卡片（相同但ID不同）。首先是在html doc中进行硬编码（并且可以正常工作）。另一个是通过简单的JS脚本生成的。我尝试使用相同的类名“ openEditModal”，但它不起作用。然后，我为这两个属性声明了“数据切换”和“数据目标”属性，但仍仅适用于硬编码卡。 Bootstrap JS文件是否只能与硬编码元素一起使用？

HTML编码卡

// I'm lazy...don't force unwrap this
progressView.progressImage = gradientImage!
progressView.setProgress(0.75, animated: true)

生成新卡的JS代码部分

<div class="row" id="all-contacts-box">
        <!-- ____EXIST_ADDRESSES____ -->
        <!-- addressBoxWrapper -->
        <div class="col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d-flex">
            <!-- addressBox -->
            <div class="card bg-light openEditModal label flex-fill">
                <!--contactHeader-->
                <div class="card-header pl-2 pt-1 font-weight-bold text-muted label-title">
                    Office Address
                </div>
                <!-- contactBody -->
                <div class="card-body row pt-0">
                    <!-- contactBodyLeft -->
                    <div class="col-4 d-flex justify-content-center align-items-center maps-pin">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <!-- contactBodyRight -->
                    <div class="col-8">
                        <h4 class="label-title font-weight-bold">Main Name</h4>
                        <h5 class="label-address font-weight-normal">Street 22</h5>
                        <h5 class="label-address font-weight-normal">City, Country</h5>
                    </div>
                </div>
            </div>
        </div>

Answer 1

动态创建的元素的问题在于，它们不具有与现有元素相同的事件处理程序。

为了修复它，您需要在添加动态元素后“刷新”监听器。

因此，我将事件处理程序添加到一个函数中，然后在将其打开之前将其关闭（例如重新启动）。如果不关闭它，则该事件将触发多次，并且您不希望使用此函数。

{{1}}

现在，您可以在创建另一个元素时调用此函数。因此，在您创建元素后，我将其命名。

这是有效的fiddle

打开Bootstrap模态单击自动生成的元素

1 个答案: