為什么整個div可點擊？

Question

我是javascript / jQuery的新手。

我有一個帶有div的html文件，其中包含一個按鈕，應在文檔加載時將其隱藏，並通過單擊鏈接進行顯示。

問題是顯示div后，整個div是可單擊的。 確切地說，它是指向同一頁面的鏈接。 我為div的display屬性使用了不同的值，例如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（）向選擇添加選項。

Answer 1

您將錨標記保持打開狀態，這可能會導致各種我們無法預測的問題（例如，錨后面的內容可能會在錨內呈現）。

解決方案是正確關閉標簽。

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

Answer 2

單擊按鈕不起作用，因為您忘記在scrpit中將＃放在其名稱之前：

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

應該是：

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

為什么整個div可點擊？

問題描述

2 個解決方案

解決方案1
5 2015-11-13 05:33:50

解決方案2
1 2015-11-13 05:36:00

為什么整個div可點擊？

問題描述

2 個解決方案

解決方案1 5 2015-11-13 05:33:50

解決方案2 1 2015-11-13 05:36:00

解決方案1
5 2015-11-13 05:33:50

解決方案2
1 2015-11-13 05:36:00