Jquery - Get Attribute using "this"

Question

This may be something very easy but i can't seem to get this to work and im not sure why. I have jquery installed and i am trying to get an attribute of "this" element when i click on it. Right now my code looks like this:

url = $(this).attr("href")

When I call this function by clicking on a link, it tells me that the var "url" is undefined. So obviously it is not picking up the "this" when i click on the link. I am trying to pass the href of an anchor tag to use as my variable.

What am i overlooking? Again, i know this is something very simple but i can't seem to figure it out so thank you for taking the time to help me.

Thanks.

<script type="text/javascript">
url = "push1";

$("a").live("click", function(event) {
    event.preventDefault();     
    url = $(this).attr("href");
})
$.ajax({
    type: "get",
    url: "/"+url+".php",
    data: "",
    dataType: "html",
    success: function(html){
        jQuery('#Right_Content').hide().html(html).fadeIn(1000);
    },

})
;
</script>

html:

<body>

<a href="push1" >Image 1</a>
<a href="push2" >Image 2</a>  

<div id="Right_Content"></div>

</body>

Can we see the rest of the code where this is called? and maybe some of your DOM markup? — Naftali
– Naftali, Commented Mar 7, 2012 at 19:52
You realise there's a semi-colon missing after the $('a').live(), right? Invalid syntax might be the problem. Also, a trailing comma from the success. And fixing your syntax seems to make it work: JS Fiddle demo, although obviously the content doesn't load, but I've logged the url variable to the console. And live() is deprecated, you should use either on(), or delegate() (the former for jQuery 1.7+, the latter for <1.7). — David Thomas
– David Thomas, Commented Mar 7, 2012 at 20:01
@ron: The comma there is valid. It's just IE which has problems with it. But it is valid JavaScript. — Felix Kling
– Felix Kling, Commented Mar 7, 2012 at 20:25

Shyju · Accepted Answer · 2012-03-07 20:11:44Z

13

This should work for you

$(function(){    
    $(".link").click(function(){
       var url=$(this).attr("href");
       alert(url);
        return false;

    });       

});

Assuming you are targeting all anchor tags with a css class called "link"

Here is the working example : http://jsfiddle.net/L99mM/2/

Edit: As per your code posted in the question

You should call preventDefault after your ajax call. and there is closing brackets should be after ajax call

$("a").live("click", function(event) {      
      var targeturl = $(this).attr("href");

      $.ajax({
               type: "get",
               url: "/"+targeturl +".php",
               data: "",
               dataType: "html",
               success: function(html){
                   jQuery('#Right_Content').hide().html(html).fadeIn(1000);
               }

           });  // closing for  ajax
        event.preventDefault(); 

  });  // closing for click  event binding

edited Mar 7, 2012 at 20:11

answered Mar 7, 2012 at 19:55

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

1 Comment

John Magnolia Over a year ago

Why need jquery object and not standard js? this.getAttribute("href")

IOrlandoni · Accepted Answer · 2012-03-07 19:59:19Z

0

<script type="text/javascript">
var url = "push1";

function getContent(){
    $.ajax({
        type: "get",
        url: "/"+url+".php",
        data: "",
        dataType: "html",
        success: function(html){
        jQuery('#Right_Content').hide().html(html).fadeIn(1000);
    });
}

$("a").live("click", function(event) {
    event.preventDefault();     
    url = $(this).attr("href");
    getContent();
});

getContent();
</script>

answered Mar 7, 2012 at 19:59

IOrlandoni

1,82813 silver badges31 bronze badges

Comments

Evert · Accepted Answer · 2012-03-07 20:42:20Z

0

you don't need "this" for this, you need the target of the event:

$("a").live("click", function(event) {
    event.preventDefault();     
    url = event.target.href;
})

working fiddle

http://jsfiddle.net/3LvCm/

edited Mar 7, 2012 at 20:42

answered Mar 7, 2012 at 20:02

Evert

8,6011 gold badge18 silver badges17 bronze badges

4 Comments

David Thomas Over a year ago

I'm thinking that you probably haven't tried that? Because, in Chromium 17/Ubuntu 11.04, all I get from that is an error: Object http://fiddle.jshell.net/_display/push1 has no method 'attr'.

Felix Kling Over a year ago

Why should he not use this? It will refer to the element the event was triggered on.

Evert Over a year ago

@DavidThomas - yep noticed that while making the fiddle, edited

Evert Over a year ago

@FelixKling "this" will work (as this fiddle shows jsfiddle.net/jUKgs), but when methods get big and complex it is a lot easier to track event variables than having to try figure out what "this" refers to in that instance. Just a design choice really.

Collectives™ on Stack Overflow

Jquery - Get Attribute using "this"

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related