Bootstrap JavaScript动态添加事件而不链接到模式窗口

Question

我有一个过滤器，他们在其中选择一个媒体项目（即：广播，数字街灯，传统街灯，长凳，海报等），然后将其与所有变量一起添加。 让我扩展一下：

用户具有他们先前选择的预设区域，但除此之外还可以选择多个区域（约翰内斯堡，开普敦，加利福尼亚州，印度），然后他选择一个媒体项目，然后查找该媒体项目的平均价格在那个地区。

现在，在模式窗口上将有更多选项，使他们可以选择该区域中与该媒体类型有关的某些选项。

导致我遇到问题的原因：存在预设的模态窗口，其中带有选项，取决于它们单击的“更多选项”按钮（即哪种媒体类型），它必须弹出相关的模态窗口。

我的问题

添加新媒体项目时，不再弹出用于其他选项的模式窗口，而是在已经存在的模式窗口（即：预设的窗口）上弹出。

以下是一些图片，向您展示我的意思：

预设媒体项目：

选定的更多选项按钮之一上的模式窗口：

添加媒体类型/过滤：

添加额外的媒体项/过滤：

如您所见，媒体项目添加到列表中，但是选择“更多选项”按钮，新项目没有任何反应，但仍然可以在旧项目上使用。

这是代码：

用于模式弹出的HTML：

<div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Choose the size</h4>
        </div>
        <div class="modal-body">
            <table class="table">
                <thead>
                <th width="100">&nbsp;</th>
                <th>Size Options</th>
                <th>Printable Size</th>
                <th>Price Range (Min-Max)</th>
                </thead>
                <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4 Sheet</td>
                    <td>60X60 Inches</td>
                    <td>R500 - R10,000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4 Sheet</td>
                    <td>60X60 Inches</td>
                    <td>R500 - R10,000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4 Sheet</td>
                    <td>60X60 Inches</td>
                    <td>R500 - R10,000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4 Sheet</td>
                    <td>60X60 Inches</td>
                    <td>R500 - R10,000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4 Sheet</td>
                    <td>60X60 Inches</td>
                    <td>R500 - R10,000</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
</div>

用于填充列表的HTML（包括PHP）：

<tr class="asset_<? echo $counterForAsset; ?> asset_item">
                    <td><?php  echo strtoupper($media_types[$i]); ?>
                    <input type="hidden" id="media_category" name="mec_id[]" value="">
                    <input type="hidden" id="media_category" name="media_category[]"
                           value="<?php echo $media_types[$i]; ?>"></td>
                    <td><input type="text"
                               class="form-control input-sm q_asset_<? echo $counterForAsset; ?> med_quantity"
                               name="med_quantity[]" id="med_quantity" placeholder="Quantity Required"
                               value="<? echo $qty; ?>"/></td>
                    <td><input type="text" readonly="true" name="avg_total[]"
                               id="asset_<? echo $counterForAsset; ?>"
                               class="form-control input-sm avg_asset_<? echo $counterForAsset; ?>"
                               value="<? echo number_format($av_price, 2); ?>"/></td>
                    <td><input type="text" readonly="true" name="rem_total[]"
                               id="asset_<? echo $counterForAsset; ?>"
                               class="form-control input-sm rem_asset rem_asset_<? echo $counterForAsset; ?>"
                               value="<? echo number_format($price, 2); ?>"/></td>
                    <td width="50"><a href="#" class="btn btn-primary btn-sm" data-toggle="modal"
                                      data-target="#<?php echo strtolower($type); ?>OptionsModal"><span class="glyphicon glyphicon-play"></span>
                            More options</a></td>
                    <td>
                        <center><input type="checkbox" name="checks[]" id="asset_<? echo $counterForAsset; ?>" class="check_asset_<? echo $counterForAsset; ?>"/></center>
                    </td>
                    </tr>

和JS用于添加新的媒体项目：

tdMediaType.innerHTML = type.toUpperCase() + ' <input type="hidden" id="media_category", value="'+type+'" name="media_category[] />';
                                            tdQuantity.innerHTML = '<input id="med_quantity" class="form-control input-sm q_asset_'+assetNumber+' med_quantity" type="text" value="0" placeholder="Quantity Required" name="med_quantity[]">';
                                            tdAverageAssetPrice.innerHTML = '<input id="asset_'+assetNumber+'" class="form-control input-sm avg_asset_'+assetNumber+'" type="text" value="'+aap.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')+'" name="avg_total[]" readonly="true">';
                                            tdPrice.innerHTML = '<input id="asset_'+assetNumber+'" class="form-control input-sm rem_asset rem_asset_'+assetNumber+'" type="text" value="0.00" name="rem_total[]" readonly="true">';
                                            tdMoreOptions.innerHTML = '<a href="#" class="btn btn-primary btn-sm" data-target="#'+type2+'OptionsModal" data-togle="modal"><span class="glyphicon glyphicon-play"></span> More Options</a>';
                                            tdMoreSelect.innerHTML = '<center><input id="asset_'+assetNumber+'" class="check_asset_'+assetNumber+'" type="checkbox" name="checks[]"></center>';

另请注意， type2变量确实输出了正确的媒体类型，该媒体类型是小写，无空格和无括号的字符串，即： bus (Digital)将为busdigital 。

Answer 1

在您的JS中，您有data-togle="modal" ，将其更改为data-toggle="modal"就像在php中一样

第二行到最后一行：

tdMoreOptions.innerHTML = '<a href="#" class="btn btn-primary btn-sm" data-target="#'+type2+'OptionsModal" data-togle="modal"><span class="glyphicon glyphicon-play"></span> More Options</a>';