jQuery .closest（）。find（）。first（）。text（）不起作用

Question

Why the following JS not working on the HTML code?

HTML CODE:

<div class="grand-parent">
  <div class="uncle">Text to log</div>
  <div class="general-random-album-images">
    <a href="#" class="base-selector">Link</a>
  </div>
</div>

JS CODE:

$("a.base-selector").click(function(){
  console.log($(this).closest('.grand-parent').find('.uncle').first().text());
});

I dont get the "Text to log" text in log.

Answer 1

This is probably because you wrap your code incorrectly since there is no other reason. Use either:

<script>
  $(document).ready(function(){ // So we wait everything is loaded
    $("a.base-selector").click(function(){
      console.log($(this).closest('.grand-parent').find('.uncle').first().text());
    });
  });
</script>

or

<script>
  $("body").on("click", "a.base-selector" function(){ // We filter
     console.log($(this).closest('.grand-parent').find('.uncle').first().text());
   });
</script>

Because you must wait everything is loaded.