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:

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

I want to fire Ajax call to the specific URL when someone hovers on any of the link. So I am registering a hover() function like this for this id:

$('#clickme').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
                }
              });
        });

My Question is How can I pass the anchor tag as an object or something so that i can retrieve anything i want like href, position of the link etc..

For single anchor tag it is working but for multiplle not..Please help me. Thanks in advance.

回答1:

id should always be unique (that is why it is called ID) .. make it class and use class selector

html

<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>

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
            }
          });
    });    

回答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>
<a href="/path/101" id="clickme" class="someclass">Sec link</a>
<a href="/path/102" id="clickme" class="someclass">Third link</a>
<a href="/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
            }
          });
});

回答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
            }
          });
    });

回答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
    });
});

来源：https://stackoverflow.com/questions/15409243/how-to-pass-url-for-dynamically-generated-anchor-tags-to-jquery-hover-function