jQuery僅在單擊指定元素時才激活.click（）

Question

我試圖創建一個cookie通知，一旦用戶單擊“同意”（或一旦添加，則取消），它將使用.slideToggle（或slideUp / Down）隱藏該元素。

當前，當您單擊頁面上的任意位置時，該元素將為slideToggle，而不僅僅是像我嘗試的那樣單擊“同意”按鈕時。

我正在Wordpress.org網站上執行此操作（不確定是否會影響它），而我只是在學習JavaScript / jQuery，因此如果我誤解了.click或.slideToggle的工作原理，我深表歉意。

代碼如下：

<style>
.test{
    display:inline-block;
    background-color:#000;
    color:#FFF;
    text-align:center;
    width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
    var agree=function(){getElementById("#agree")};
    $(agree).click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

Answer 1

這個agree函數從不返回任何東西。 var agree=function(){getElementById("#agree")}; 此外，您從不調用函數（僅將引用傳遞給函數）。 最后，您應該將jquery放入document ready事件中，以便在腳本運行之前加載整個頁面。

試試這個javascript：

$(function() {
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
});

Answer 2

問題是您嘗試在元素存在之前就對事件進行連線：

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

您無法將事件添加到尚不存在的元素中。

您可以通過多種方法解決此問題：

1在元素存在后添加代碼：

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

2准備好使用的文檔：

<script type="text/javascript">
    $(function() { 
        $("#agree").click(function(){
            $("#box").slideToggle();
        });
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

3使用事件委托：

<script type="text/javascript">
    $(document).on("click", "#agree", function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

---

當您單擊頁面上的任意位置時，該元素將滑動切換

發生的情況是，在var agree=function(){getElementById("#agree")}; 然后agree == null所以您要執行$(null).click(...然后將其應用於整個頁面。如果將其更改為$("#agree").click(...遇到上述問題（這就是為什么您無法通過這種方式工作）