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?

Answer 1

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