Question

I am trying to grab the link (or href attribute) from an anchor tag within a div.

Here is my full HTML code:

<script> 
    var link = $('#jira_details a').attr('href');

    function useJira() {
        alert(link);
    }
</script>

<div id="jira_details">
    <ul>
        <li>
            <a href="http://www.google.com">Bugs</a>
        </li>
    </ul>
</div>
<input type="submit" value="test" onclick="javascript:useJira();" />

However, whenever I click the submit button, it alerts back with undefined every time. I have even tried changing:

$('#jira_details a').attr('href');

to

$('#jira_details ul li a').attr('href');

So that it would go to that specific anchor tag, however it still did not work. Any ideas on what the issue might be?

Answer 1

The var link is being written before the dom is loaded.

If the anchor url never changes, you can do:

<script> 

$(function(){
  var link = $('#jira_details a').attr('href');
});

function useJira(){
  alert(link);
}
</script> 

OR, if the href could change:

<script> 
function useJira(){
  var link = $('#jira_details a').attr('href');
  alert(link);
}
</script>