Get link href value from within div/container and navigate to it

StackOverflow https://stackoverflow.com/questions/23191568

Question

I'm basically creating a clickable container, which is a list element. The list element has an anchor tag within it that is invisible. When the list element is clicked, Jquery is supposed to pull the href value from the anchor tag within the list element, store that href value in a variable, and then use the variable to navigate to the link. The "clicking the list element" part works pretty well, but the href value for the link within the list value always comes up as undefined. Help? Here's my code:

HTML:

<div class="dated-listing>
    <ul>
        <li>
            <a class="no-display" style="visibility:hidden" href="http://www.google.com"></a>
        </li>
    </ul>
</div>

Jquery:

$('.dated-listing ul li').click(function(){
    var x = $('a.no-display', this).attr('href');
    window.location.href = x;
});
Was it helpful?

Solution

you can use data-url attribute instead of adding anchor tag which is hidden.

do like this to acheive it:

<div class="dated-listing">
    <ul class="test">
        <li data-url="http://www.google.com">dfdsf</li>
    </ul>
</div>

and script:

$(document).ready(function(){

$('.dated-listing').on('click','li',function(){

    alert($(this).data('url'))
    window.location.href = $(this).data('url');
});

    });

Here is Fiddle DEMO

OTHER TIPS

Use following 

<body>
  <div class="dated-listing">
    <ul>
        <li>
            <a class="no-display" style="visibility:hidden" href="http://www.google.com">hi</a>
        </li>
    </ul>
  </div>

    <script type='text/javascript'>//<![CDATA[ 
        $('.dated-listing ul li').click(function(){
            var x = $('a.no-display', this).attr('href');
            window.location.href = x;
            alert(x);
        });
    </script>
</body>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top