Javascript 模式中的数据在单击时被调用两次

我一直在使用一种模式，当用户单击“取消”按钮时，该模式将被取消。在按钮出现故障之前，一切正常。当我点击“取消”按钮时，模式被取消，但关闭并再次打开。因此，需要单击两次Disclose按钮来关闭模式

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

                        <div class="modal-dialog modal-sm">

                          <div class="modal-content">


                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              <h4 class="modal-title" id="myModalLabel"><b>Why are you deleting this book?</b></h4>
                            </div>

                              <!--modal body starts -->
                              <div class="modal-body">

                                <div class="radio">
                                  <label>
                                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Sold
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Sold on another site or elsewhere
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Don't want to sell it now
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Lack of buyer interest
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Vacation, break
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Other reason
                                  </label>
                                </div>

                              </div>
                              <!--modal body end -->

                              <div class="modal-footer">
                                <button type="button" class="btn btn-primary">Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                              </div>

                          </div>
                        </div>
                      </div>

这是“引导”模式，我没有对JS文件做任何更改。只有CSS和HTML被修改过。在浏览器中检查时，我看到以下函数被调用了两次

<div class="modal-backdrop fade in"></div>

如何修复此错误？我甚至不知道从哪里开始！下面是我的模态代码

注意：模态右上角的“交叉”aria标签也遇到了相同的错误

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

                        <div class="modal-dialog modal-sm">

                          <div class="modal-content">


                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              <h4 class="modal-title" id="myModalLabel"><b>Why are you deleting this book?</b></h4>
                            </div>

                              <!--modal body starts -->
                              <div class="modal-body">

                                <div class="radio">
                                  <label>
                                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Sold
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Sold on another site or elsewhere
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Don't want to sell it now
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Lack of buyer interest
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Vacation, break
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Other reason
                                  </label>
                                </div>

                              </div>
                              <!--modal body end -->

                              <div class="modal-footer">
                                <button type="button" class="btn btn-primary">Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                              </div>

                          </div>
                        </div>
                      </div>

&时代；
你为什么要删除这本书？
出售
在其他网站或其他地方出售
我现在不想卖了
缺乏买方兴趣
假期
其他原因
删去
取消

打开模式的按钮的HTML代码

<button type= "submit" class="dashbtn dashbtn-danger">EDIT</button><br>
<button type= "button" class="dashbtn dashbtn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">DELETE</button>

编辑

删去

当代码中有多个模态共享同一类时，通常会发生这种情况。为了防止出现这种情况，请为模态指定不同的id，并在数据目标属性中使用该id。 试试这个：

<button type="submit" class="dashbtn dashbtn-danger">EDIT</button>
<br>
<button type="button" class="dashbtn dashbtn-primary" data-toggle="modal" data-target="#bs-example-modal-sm">DELETE</button>

编辑


删去

对于您的modal：

<div class="modal fade" id="bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"><b>Why are you deleting this book?</b></h4>
            </div>
            <!--modal body starts -->
            <div class="modal-body">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Sold
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Sold on another site or elsewhere
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Don't want to sell it now
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Lack of buyer interest
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Vacation, break
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Other reason
                    </label>
                </div>
            </div>
            <!--modal body end -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

&时代；
你为什么要删除这本书？
出售
在其他网站或其他地方出售
我现在不想卖了
缺乏买方兴趣
假期
其他原因
删去
取消

只需确保为每个模式分配不同的ID，并使用

data target=“#foo”

---

查看有关模式数据属性的部分：

在按钮上显示HTML代码您是否已将模式HTML放置在处理单击显示模式的同一个div中？如果是这样的话，我想点击事件会冒出气泡，然后打开模式again@AlexanderSolonik我们已经更新了代码。请看一看。如果有50多个这样的模态，它们是在一个循环中创建的呢？@Neo182，如果你在一个循环中创建东西，你可以使用循环索引为ID创建唯一的键；这样，您的DOM中总是有唯一的ID。