CODEWITHSUNDEEP
javascriptjquerycss
Blainer
Blainer

Reputation: 2702

grabbing href tag on click

I am trying to grab the href tag on the element clicked in the "navigation" div The current code returns "#BiblesandCommentaries" every time no matter what element I click in the navigation div.

html

<div class="navigation">
        <ul>
          <li><a href="#BiblesandCommentaries">الانجيل-تعليقات</a> </li>
          <li><a href="#EnquirersLibrary">الاستفسارات</a> </li>
          <li><a href="#NewBelievers">مؤمنون جدد</a> </li>
          <li><a href="#ChristianLiving">حياة المسيحى</a> </li>
          <li><a href="#FamilyLibrary">مكتبة الأسرة</a> </li>
          <li><a href="#YoungAdultLibrary">مكتبة الشباب</a> </li>
          <li><a href="#WorshipLibrary">مزامير وتراتيل</a> </li>
          <li><a href="#BibleTeachings">التدريس</a> </li>
          <li><a href="#Leadership">القيادة</a> </li>
          <li><a href="#SchoolofChrist">مدرسة الإنجيل</a> </li>
          <li><a href="#Dota">شاگرد سازی بصورت شنیدن</a></li>
          <li><a href="#MinorityLanguages">فهم المسيح</a> </li>
        </ul>
    </div>

js

$('.navigation').click(function() {
    test = $(this).find('a').attr('href');
    alert (test);
});

Upvotes: 0

Views: 252

Answers (3)

Eric Hodonsky
Eric Hodonsky

Reputation: 5897

overall you should try this for best practices:

$('div.navigation').on("click", "a", function() {
    alert($(this).attr('href'));
});

Remember, try not to set variables in memory unless you have to parse the DOM more than once for the same element. Also always try and give as much depth to the jQuery selector as you can, gives it less of the DOM to parse. If that doesn't make sense, think of it this way. If it has to parse through only the div tags for the class 'navigation' that should remove all the other tags and take much less time than parsing every tag for it's class attribute.

or you could follow the event:

$('div.navigation').on("click", function(event) {
    if(event.target.href){ alert(event.target.href); }
});

The reason to do the above is for memory purposes as well. If you're only watching the wrapper, there is only one event listener in memory. If you have the event listener on the 'a' tag itself, you have to have an event listener in memory for every 'a' tag in the wrapper. This could get heavy... imagine if Google had an event listener on every image that loads in the images page... You'd run out of memory.

Upvotes: 3

JKirchartz
JKirchartz

Reputation: 18022

using .find().attr() like that will always get the first one, you need to change the selector for your click function to target the a like this:

$('.navigation a').click(function(e) {
    e.preventDefault(); //use this if you don't want to reload the page
    var test = $(this).attr('href');
    alert (test);
});

also you should declare your variables.

EDIT ok commenters, I was just fixing his code, but here ya go:

$('.navigation a').on("click",function(){
       alert($(this).attr('href'));
});

EDIT haha commenters, let's get pedantic:

$("div.navigation").on("click", "a", function(e) {
    e.preventDefault();
    alert ($(this).attr('href'));
});​​​​

without preventing the default operation of the a tag, you'll be reloading the page

EDIT: Want to take it a step further? Forget jQuery. Here's some vanilla JS

document.querySelector("div.navigation").onclick = function(e){
    if(e.target.href){
        e.preventDefault();
        alert(e.target.href);
    }
}

Upvotes: 7

Martin.
Martin.

Reputation: 10529

.navigation is only one (ul). Try something like 

$('.navigation a').click(function() {
    var test = $(this).attr('href');
    alert (test);
});

Upvotes: 0

Related Questions