CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Akhilesh Sehgal
Akhilesh Sehgal

Reputation: 186

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect. What I am trying to do is as given below: Script:

    <script>
      $(document).ready(function () {
        $("ul.treeview-menu").find("a.links").click(function () {
            $("body").addClass("sidebar-collapse");
         });
      });
   </script>

 <ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="any-link" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

Thank you in advance.

Upvotes: 2

Views: 644

Answers (3)

Usman Ali
Usman Ali

Reputation: 85

 $(document).ready(function () {
    $("ul.treeview-menu").find("a.links").click(function (e) {
    e.preventDefault()
        $("body").addClass("Enter your class name");
    });
  });

Upvotes: 0

mondersky
mondersky

Reputation: 471

you have two issues:

1- this line //}); it was commented and was preventing your code from working.

2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.

try this:

 <script>
      $(document).ready(function () {
        $("ul.treeview-menu").find("a.links").click(function (e) {
        e.preventDefault()
            $("body").addClass("sidebar-collapse");
        });
      });
   </script>

 <ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="abc" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

Upvotes: 0

Haresh Vidja
Haresh Vidja

Reputation: 8496

Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding

  $(document).ready(function () {
    $(document).on('click','ul.treeview-menu a.links',function () {
        $("body").addClass("sidebar-collapse");
    });
  });



<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="abc" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

Upvotes: 1

Related Questions