通過特定 div 的元素調用函數在 jQuery 中不起作用

Question

我有一個手風琴菜單，其中有一些帶有 id 的 div 中的鏈接。 這里我有兩個 id=collapseThree 和 id=collapseFour 的 div。 現在，當單擊 collapseFour div 的任何鏈接元素時，我想要一個簡單的警報。 但沒有警報或console.log。

這是我的嘗試。 我的觀點：

<div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-large">
                        </span>Hospital</a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td>
                                    <span class="glyphicon glyphicon-asterisk link-item"></span><a href="${createLink(controller: 'hospitalMember')}">Hospital Member</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-large">
                        </span>Somiti</a>
                    </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table class="table">
                            <tr>
                                <td>
                                    <span class="glyphicon glyphicon-asterisk link-item"></span><a href="${createLink(controller: 'jointMember')}">Somiti Member</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

我的 jQuery 代碼：

$(document).ready(function () {
        console.log("ready");
        $("#collapseFour").on("click", ".link-item", function() {
            console.log("Clicked");
        });
    })

我只想查看Clicked文本。

Answer 1

由於帶有link-item類的span元素不是單擊元素的父元素，因此您的代碼將無法正常工作。 您可以將span的結束標記移動到a元素之后，也可以使用.next()函數來引用span之后的下一個元素。

<span class="glyphicon glyphicon-asterisk link-item">
  <a href="${createLink(controller: 'jointMember')}">Somiti Member</a>
</span>

 $(document).ready(function() { console.log("ready"); $("#collapseFour .link-item").click(function(e) { e.preventDefault(); console.log("Clicked"); }); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-large"> </span>Hospital</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-asterisk link-item"></span><a href="${createLink(controller: 'hospitalMember')}">Hospital Member</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-large"> </span>Somiti</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-asterisk link-item"><a href="${createLink(controller: 'jointMember')}">Somiti Member</a></span> </td> </tr> </table> </div> </div> </div>

Answer 2

我解決問題如下：

$(document).ready(function () {
        $(".link-item").next().click(function(e) {
            var currId = $(this).closest(".collapse").attr("id");
            localStorage.setItem("currItem", currId);
        });

        $("#" + localStorage.getItem("currItem")).collapse('show')
    })