jquery click event for each class to find href attribute

Question

i am new with jquery. i am trying to find the "href" attribute of targeted element.

I have written a script for click event for each class "link-redirect".In this trying to select href for target element using data-target attribute.

But by using my script i am always getting href of first div i.e "link1".

what wrong i am doing here ?

<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link1" class="title-link">LInk</a>
    </div>
</div>
<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link2" class="title-link">LInk</a>
    </div>
</div>
<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link3" class="title-link">LInk</a>
    </div>
</div>
<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link4" class="title-link">LInk</a>
    </div>
</div>

<script>
    $('.link-redirect').each(function(){
        $(this).on( "click", function() {
            var self = $(this);
            var link = $(self.data('target')).attr('href');           
            alert(link);           
        });
    });
</script>

The class is on the div, not the a.

JNF
– JNF

2014-01-20 06:14:13 +00:00
Commented Jan 20, 2014 at 6:14 — JNF
– JNF, Commented Jan 20, 2014 at 6:14
Why data-target element?

Somnath Kharat
– Somnath Kharat

2014-01-20 06:26:02 +00:00
Commented Jan 20, 2014 at 6:26 — Somnath Kharat
– Somnath Kharat, Commented Jan 20, 2014 at 6:26

Arun P Johny · Accepted Answer · 2014-01-20 06:14:49Z

2

You need to find the anchor element relative(descendant in this case) to the current link-redirect element

$('.link-redirect').on("click", function () {
    var self = $(this);
    var link = self.find(self.data('target')).attr('href');
    alert(link);
});

Demo: Fiddle

answered Jan 20, 2014 at 6:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JNF Over a year ago

Missed that data. You got it.

Kango Over a year ago

@Anup: getting undefined .

Arun P Johny Over a year ago

@Kango in that case the html provided by you might be different from what you have in your page... did you check the attached demo

Kango Over a year ago

I got my issue.my html structure slightly different.

Rajaprabhu Aravindasamy · Accepted Answer · 2014-01-20 06:14:15Z

1

Try to use the context feature provided with Jquery selectors,

 $('.link-redirect').click(function(){
      var link = $($(this).data('target') , $(this)).attr('href');           
      alert(link);           
 });

DEMO

answered Jan 20, 2014 at 6:14

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

Rajaprabhu Aravindasamy Over a year ago

@sarath Sure :) But OP is not asking about that i guess.

Rajaprabhu Aravindasamy Over a year ago

@Kango Did you test the demo provided by me.?

Rohan Kumar · Accepted Answer · 2014-01-20 06:20:30Z

1

You should your anchor tag in your div element and don't use each() or loops to bind click event try this,

$('.link-redirect').on("click", function (e) {
    var self = $(this);
    var link = self.find('a').attr('href');
    alert(link);
});

Demo

edited Jan 20, 2014 at 6:20

answered Jan 20, 2014 at 6:14

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Comments

Somnath Kharat · Accepted Answer · 2014-01-20 06:24:55Z

0

This would be the simplest way:

$('.title-link').on("click", function () {
   alert($(this).attr("href"));

});

jsfiddle

answered Jan 20, 2014 at 6:24

Somnath Kharat

3,5952 gold badges31 silver badges51 bronze badges

Collectives™ on Stack Overflow

jquery click event for each class to find href attribute

4 Answers 4

4 Comments

DEMO

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related