CODEWITHSUNDEEP
javascriptjqueryhtml
Mohammed Rabiulla RABI
Mohammed Rabiulla RABI

Reputation: 493

Not able to fetch the anchor tag value using jquery

I have an .outerdiv in which dynamically html elements are added through script. Inside that div there is an anchor for that anchor i want to bind an event or access that inner text i tried using jquery but something fails please help out.

Here goes glitch link which i have tried

UPDATE One More thing I want to mention is I don't have control on script.js assume its like plugin . what ever i can do is through my js. UPDATE As per suggestions i included my alert inside document.ready still not working

> this is a script.js code which i don't have control, i cant edit this. 


  $(document).ready(function () {
    $(".outdiv").append("<p><a href='#'>i am a link</a></p>");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
    <script>
      $(document).ready(function () {
    alert($(".outdiv a").text());
    });
    </script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

Upvotes: 1

Views: 824

Answers (6)

Mamun
Mamun

Reputation: 68933

The issue is with script's defer attribute:

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

This is ultimately causing the appending of the element after all the scripts are executed, thus in the previous script code the element is not available. Remove the attribute defer from the script tag, your script should be:

<script src="/script.js"></script>

You can place the alert after the appending the link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js"></script><!---this script i have written in js part of snippset"-->
    <script>
      $(document).ready(function () {
        $(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
      });
    </script>
    <script>
      $(document).ready(function () {
        alert($(".outdiv a").text());
      });
    </script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14189

Use holdReady 

$(document).ready(function() { 
  $.holdReady( true );
      $.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js" 
      alert($(".outdiv a").text());
      $.holdReady( false );
    });
});


  $(document).ready(function(){
    $(".outdiv").append("<p><a href='#'>i am a link</a></p>");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
    
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
    <script>
      

$(document).ready(function() { 
$.holdReady( true );
  $.getScript( "https://button.glitch.me/button.js", function() {
  alert($(".outdiv a").text());
  $.holdReady( false );
});
});
    </script>
  </body>
</html>

Upvotes: 0

31piy
31piy

Reputation: 23869

Extracting the text out of the anchor tag isn't possible until the element has been added to the DOM. So, executing the script before the initialization of the element won't work.

On the other hand, you also mentioned to bind an event to that anchor tag. Well, that's possible using the on method. You can try this:

$(".outdiv").on('click', 'a', function() {
  console.log('clicked');

  // You can extract the text of the clicked anchor here
  console.log($(this).text());
});

Upvotes: 0

Naveen M
Naveen M

Reputation: 89

You may use the alert function inside document ready in your dynamic files

$(document).ready(function(){
   alert($(".outdiv a").text());
});

Upvotes: 0

Steve T
Steve T

Reputation: 572

You are populating the a tag in document ready(when the page is completely loaded), but you're alerting the (yet not existing) contents during page load. So just put the alert in the document ready block.

Upvotes: 0

Ifrah
Ifrah

Reputation: 144

You can try this:

$(document).ready(function () {
    $(".outdiv").append("<p><a href='#'>i am a link</a></p>");
    alert($(".outdiv a").text());
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
    <script>
   // alert($(".outdiv a").text());
    
    </script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

Upvotes: 1

Related Questions