Question

0

81

Views

jQuery addClass to a child element not working in Egde

I have this structure:

<ul>
  <li class="js-drilldown-back"><a>Back</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
</ul>

and I'm trying to add a class to the first tag, so it becomes this:

<ul>
  <li class="js-drilldown-back"><a class="click-back">Back<a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
</ul>

The framework I use is adding this back button dynamically, so I can't manually add the class to it. I have tried this code:

$(".js-drilldown-back").children("a").addClass("click-back")

but it doesn't seem to work in Edge, other browsers seem happy with it. I've also tried:

$(".js-drilldown-back:has a").addClass("click-back")
$(".js-drilldown-back:has > a").addClass("click-back")
$(".js-drilldown-back a").addClass("click-back")
$(".js-drilldown-back > a").addClass("click-back")

What I'm trying to achieve is when you click the Back button it removes a class from the body tag, ie:

$(".click-back").click(function(){
  $("#page").removeClass("submenu-open")
})

Targetting the parent (.js-drilldown-back) doesn't seem to work which is why I'm trying to add the class to the child and target this instead.

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T08:02:57.879Z

You don't appear to have proper semicolon terminations after each statement.

$(".js-drilldown-back").children("a").addClass("click-back");

:first-child seems to work fine in Edge, or maybe the console.log in jsfiddle is being lenient? I also reworked how you're applying your on click event and confirmed that it removes the class from the anchor.

$(".js-drilldown-back:first-child").addClass("click-back");
console.log( $(".js-drilldown-back:first-child").hasClass("click-back") );

$(document).on("click", ".click-back", function(){
  $(this).removeClass("click-back");
})

Console confirms that the anchor has the desired class, i.e., :first-child is working.

Upon clicking the anchor, source confirms that the class is removed. I changed the target just to confirm it was removing something I could see and verify.

All tested in Edge here: https://jsfiddle.net/8bfo9cza/