How To Pass Url For Dynamically Generated Anchor Tags To Jquery Hover() Function??

Hi What I am trying to do here is I am generating a list of Links in HTML as Anchor tags: One linkCopy

jquery

$('.clickme').hover(function(){
     var $this=$(this);
     $.ajax({
            beforeSend : function(jqXHR){
                //Doin something
            },
            url: //should be the url from the anchor tag that fired this event(how to get it??),data:{'href':$this.attr('href')}, //this will send '/path/100' as href if u click first link success: function(data) {
                //Doin something
            },
            error: function(jqXHR){
                //Doin something
            }
          });
    });    

Solution 2:

You should use class instead of using same id for multiple object and use this.href for each object. Assigning same id to more then one html elements is not allowed, though you can do it.

<a href="/path/100" id="clickme"class="someclass">One link</a>
<ahref="/path/101"id="clickme"class="someclass">Sec link</a><ahref="/path/102"id="clickme"class="someclass">Third link</a><ahref="/path/103"id="clickme"class="someclass">Fourth link</a>


$('.someclass').hover(function(){
     $.ajax({
            beforeSend : function(jqXHR){
                //Doin something
            },
            url: //should be the url from the anchor tag that fired this event(how to get it??),success: function(data) {
                //Doin something
            },
            error: function(jqXHR){
                //Doin something
            }
          });
});

Solution 3:

You can use $(this) inside if your hover event handler to get the href attribute. And the other answers are correct about using class instead of id. The example below is set to use a class of 'clickme' instead of an id.

$('.clickme').hover(function(){
     var $this = $(this);
     var theUrl = $this.attr('href');

     $.ajax({
            beforeSend : function(jqXHR){
                //Doin something
            },
            url: theUrl
            success: function(data) {
                //Doin something
            },
            error: function(jqXHR){
                //Doin something
            }
          });
    });

Solution 4:

It's not working because ID's are unique, and jQuery will only find the first instance of an ID.

<a href="/path/100" class="clickme">One link</a>
<a href="/path/101" class="clickme">Sec link</a>
<a href="/path/102" class="clickme">Third link</a>
<a href="/path/103" class="clickme">Fourth link</a>

js

$('.clickme').mouseenter(function(){
    var href = $(this).attr('href');
    $.ajax({
         url : href
    });
});