jQuery assigning a variable with click()

Question

I have a simple function in which a user will click on a div, the div contains a value attribute which is a unique URL, and then my jQuery should read that attribute and fire off an ajax request based upon that unique URL.

$("#user_result").click(function(){         
    var loadUrl = $(this).attr("value");
    $("#user_profile").html(ajax_load).load(loadUrl);
});

It works for the very first element in my list, where the value="{{URL}}" attribute is in the div#user_result:

<div id="user_result" onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" value="{% url accounts.views.quickview user.user %}">
    <div id="user_thumbnail">
            <img height="50px" width="50px" src="/static/{%if user.thumbnail %}{{user.thumbnail}}{%else%}cms/images/profile_default.png{%endif%}"> 
    </div>
    <div id="user_teaser">
        <span id="fullname">{{user.fullname}}</span>
        <span id="title"> {{user.title}} </span>
    </div>
</div>

But it never works for any of the other elements that I click.

How can I ensure that the var continues to get assigned a new value with each click?

Do you actually have multiple elements on the page with the same id? — Andrew Whitaker
– Andrew Whitaker, Commented Jun 30, 2011 at 1:52
(Unrelated to your problem, but) You don't care about keyboard-only users? — nnnnnn
– nnnnnn, Commented Jun 30, 2011 at 2:11
@andrew and @JasonSage -- yes, there is a large list of elements with the same ID. @Neil it's just an image that sits there while the url is being fetched. @nnnnnn no — Brian D
– Brian D, Commented Jun 30, 2011 at 2:44

Traveling_Monk · Accepted Answer · 2011-06-30 02:01:53Z

4

DIV id's must be unique, so change your jquery to be

$(".user_result").click(function(){         
    var loadUrl = $(this).attr("title");
    $("#user_profile").html(ajax_load).load(loadUrl);
    });

and turn your id into a class

   <div class="user_result" onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" title="{% url accounts.views.quickview user.user %}">
        <div class="user_thumbnail">
                <img height="50px" width="50px" src="/static/{%if user.thumbnail %}{{user.thumbnail}}{%else%}cms/images/profile_default.png{%endif%}"> 
        </div>
        <div class="user_teaser">
            <span class="fullname">{{user.fullname}}</span>
            <span class="title"> {{user.title}} </span>
        </div>

</div>
<div class="user_result" onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" title="{% url accounts.views.quickview user.user %}">
        <div class="user_thumbnail">
                <img height="50px" width="50px" src="/static/{%if user.thumbnail %}{{user.thumbnail}}{%else%}cms/images/profile_default.png{%endif%}"> 
        </div>
        <div class="user_teaser">
            <span class="fullname">{{user.fullname}}</span>
            <span class="title"> {{user.title}} </span>
        </div>

</div>

also dont expect a call to a the attribute value on a div to always work that is not standard html, only form inputs have a value I would change that to a title (i have changed my code sample to match

edited Jun 30, 2011 at 2:01

answered Jun 30, 2011 at 1:55

Traveling_Monk

7882 gold badges11 silver badges29 bronze badges

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

2 Comments

John Jacquay Over a year ago

He should also change the id's to classes for the child elements of <div class="user_result">

Brian D Over a year ago

Yes, thanks @jjacuay and @Traveling_Monk. Simply changing it to a class worked, and the title vs value is definitely a good idea.

John Jacquay · Accepted Answer · 2011-06-30 01:55:35Z

2

I think you are having this problem because you are using an id instead of a class for your div. Id's are only supposed to be used once in an HTML document while class can be used many times. Try to change your id's to classes.

answered Jun 30, 2011 at 1:55

John Jacquay

2431 gold badge6 silver badges19 bronze badges

Comments

user749687 · Accepted Answer · 2011-06-30 01:59:13Z

0

Is user_profile a parent element of user_result?

If so then when you click and it reloads that html the event handler will be removed you will have to use live http://api.jquery.com/live/

also I would personally use a class instead of a id to base the click on e.g. .....

$(".user-profile").live('click', function(){ 
 ...  
});

answered Jun 30, 2011 at 1:59

user749687

Comments

Dr.Molle · Accepted Answer · 2011-06-30 02:31:42Z

0

value is not a valid attribute for a div~~, so jQuery will not recognize it~~.

You may instead set an attribute "data-value" and retrieve it using $(this).data("value")

Edit: There was a change in the latest jQuery-Version 1.6.1

Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr(“value”, “somevalue”) will continue to work, as it did before 1.6).
http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Looks you're a victim of the last jQuery-update, it appears only when the attribute-name is "value".

However, my suggestion for a fix will stay the same.

edited Jun 30, 2011 at 2:31

answered Jun 30, 2011 at 1:58

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

3 Comments

jsonnull Over a year ago

Not quite. jQuery will set and read nonstandard attributes, but it is bad practice and should be avoided.

Dr.Molle Over a year ago

This may change sometimes and it looks like it changes right now in Version 1.6.1 jsfiddle.net/doktormolle/ckpUM

Dr.Molle Over a year ago

There are some release-notes related to attr() , especially if the attribute-name is "value".

Collectives™ on Stack Overflow

jQuery assigning a variable with click()

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related