Calling a function by a specific div's elements is not working in jQuery

Question

I have a accordion menu, where I have some links in some div with id. Here I have two div with id=collapseThree and id=collapseFour. Now I want a simple alert when any link element of collapseFour div is clicked. But no alert or console.log.

Here are my attempts. My view:

<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>

My jQuery code:

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

All I want to view the Clicked text.

Answer 1

Since the span element with link-item class is not a parent of the clicked element, your code won't work properly. You can either move the closing tag of the span after the a element or use .next() function to refer to the next element just right after the 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

I solve the issue as follow :

$(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')
    })