javascript - 为什么整个 div 都是可点击的?

标签 javascript jquery html

我是 javascript/jQuery 的新手。

我有一个带有 div 的 html 文件,其中包含一个按钮,该按钮应该在文档加载时隐藏,并通过单击链接来显示。

问题在于,显示 div 后,整个 div 都是可点击的。准确的说,是指向同一页面的链接。我对 div 的显示属性使用了不同的值,例如block、inline、inline-block,但问题仍然存在。

另一个问题(似乎与第一个问题相关)是按钮单击不起作用。

这是我的文件的正文部分:

<body>
    <section>
        <header><h1>Welcome!</h1></header>
        <nav>
            <ul>
                <li id="viewER"><a href="#">View an ER Diagram</li>         
            </ul>
        </nav>
    </section>
    <div id="diaSelect">
        <p>Choose a diagram:</p> 
        <p>
        <select id="sel">
        </select>
        </p>
        <p>
        <button id="show" type="button"></button>
        </p>
    </div>

    <script>
        $(document).ready(function(){

            $("#viewER a").click(function() {
                    if ($("#diaSelect").is(':hidden'))
                        $("#diaSelect").css('display', 'inline-block'); 
                    $("#diaSelect").find('option').remove();
                    listModelFiles();
                    $("#show").text("View");
            });

            $("#diaSelect").css('display', 'none');

            $("show").on("click", function(){
               ...
            });

        });                     
    </script>
</body>  

listModelFiles() 将选项添加到选择中。

最佳答案

您已将 anchor 标记保持打开状态,这可能会导致我们无法预测的各种问题(例如, anchor 后面的内容可能会在 anchor 内部呈现)。

解决方案是正确关闭标签。

<li id="viewER"><a href="#">View an ER Diagram</a></li>  

关于javascript - 为什么整个 div 都是可点击的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33686486/

相关文章:

javascript - 不重命名的 ADVANCED_OPTIMIZATION

javascript - 如何在每次不触发命令的情况下检查 css 更改

css - 如何垂直对齐 `inline-block` 元素内的 `<td>` 元素?

javascript - 单击条形图标以外的任何地方时,垂直导航栏应该折叠

Javascript - 如何遍历给定页面的所有 URL

javascript - Linux Firefox 以不同方式分隔事物

javascript - Whack-A-Mole JavaScript返回和循环不起作用

javascript - jQuery:如何在父容器中创建一个粘性侧边栏?

javascript - "undefined"用于提醒 ajax 调用响应,为什么?

html - 缩小屏幕尺寸时将一个超大屏幕堆叠在一起