Javascript 从下拉列表中引导模式不工作

我试图在下拉菜单中添加一个模式，但除非我点击两次或添加一个结束div，否则它将无法工作

这是我的HTML：

<div class="bs-example">
<form>
    <!--Default buttons with dropdown menu-->
    <div class="btn-group">
        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a  href="#myModal" data-toggle="modal">edit</a></li>  <!-- i dont want to add a div here -->


             <div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </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的问题。这里是一个更新的工作行为

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    The modal dosnt come up after clicking on "edit". you have to click Action once again for it to come up
<div class="bs-example">
    <form>
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a  href="#myModal" data-toggle="modal">edit</a></li>
            </ul>
        </div>
    </form>
</div>

<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
    </div>
    <div class="modal-body">
        <p>Do you want to save changes you made to document before closing?</p>
        <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
    </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>

点击“编辑”后，模式文件将显示。您必须再次单击“操作”才能显示它
行动



&时代；
确认书
是否要保存关闭前对文档所做的更改

如果不保存，更改将丢失
关
保存更改

看起来您没有关闭列表

加：

在你最后一次

<li></li>

根据我早期的评论：基于您提供的JSFIDLE（因为上面的HTML不完整），更准确的答案是您有一个

div

作为

UL

的孩子。这是无效的。只有

LI

s可以是

UL

的子女

此外，您还没有关闭表单元素

格式化现有HTML（使用JSFIDLE中的

tidyup

按钮）如下所示：

解决方案：只需将

div

移出

UL

即可成为有效的HTML，并且需要添加

JSFiddle：

格式化Html:

<div class="bs-example">
    <form>
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>

            </button>
            <ul class="dropdown-menu">
                <li><a href="#myModal" data-toggle="modal">edit</a>

                </li>
            </ul>
            <!-- i dont want to add a div here -->
            <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                             <h4 class="modal-title">Confirmation</h4>

                        </div>
                        <div class="modal-body">
                            <p>Do you want to save changes you made to document before closing?</p>
                            <p class="text-warning"><small>If you don't save, your changes will be lost.</small>

                            </p>
                        </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>
        </div>
    </form>
</div>

行动




&时代；
确认书
是否要保存关闭前对文档所做的更改

如果不保存，更改将丢失。

关
保存更改

---

一般建议：使用格式良好的HTML，这样您就可以发现类似这样的错误

注意您的

表单

未关闭，这意味着HTML无效。最好先修复HTML。它在我的主代码中是关闭的，它不起作用。你有一个DIV作为UL的子项，这是无效的。这导致了主要问题。Bart Jedrocha在下面的示例中绕过了这些错误。哦，现在我明白你的意思了。这不是唯一的HTML问题，在3次投票中做得很好：）你是对的，不是。。但这个问题将解决最初的问题，即为什么第一次点击时模态没有激活。解决所有HTML问题不是真正的问题如果没有JSFiddle，您（和选民）可能会猜测这一修复实际上解决了问题。最好自己试试你的解决方案，看看：）我自己也试过了。。。对于这样一个简单明了的解决方案，无需发布JSFIDLE。也许你可以接受你自己的建议，不要对我测试过的解决方案进行猜测；）如果您检查了OP提供的JSFIDLE，您可能已经注意到

已经在页面中，就在div之后。移动

div

将是一个更明智的答案。测试。。。呸！：）

<div class="bs-example">
    <form>
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>

            </button>
            <ul class="dropdown-menu">
                <li><a href="#myModal" data-toggle="modal">edit</a>

                </li>
            </ul>
            <!-- i dont want to add a div here -->
            <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                             <h4 class="modal-title">Confirmation</h4>

                        </div>
                        <div class="modal-body">
                            <p>Do you want to save changes you made to document before closing?</p>
                            <p class="text-warning"><small>If you don't save, your changes will be lost.</small>

                            </p>
                        </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>
        </div>
    </form>
</div>