Question

我有一个简单的函数，用户将点击div，div包含一个值属性，这是一个唯一的URL，然后我的jQuery应该读取该属性并根据该唯一的URL触发ajax请求。

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

适用于我的列表中的第一个元素，其中value="{{URL}}"属性位于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>

但它永远不适用于我点击的任何其他元素。

如何确保每次点击都会继续为var分配新值？

Answer 1

DIV id必须是唯一的，所以将你的jquery更改为

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

并将您的ID转换为课程

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

也不要指望调用div上的属性值来始终工作，这不是标准的html，只有表单输入有一个值，我会将其更改为标题（我已将我的代码示例更改为匹配

Answer 2

我认为你遇到了这个问题，因为你正在使用id代替你的div类。 Id只能在HTML文档中使用一次，而类可以多次使用。尝试将您的ID更改为类。

Answer 3

值不是div ~~的有效属性，因此jQuery无法识别它~~。

您可以改为设置属性“data-value”并使用$(this).data("value")

检索它

编辑：最新的jQuery-Version 1.6.1

发生了变化

不应使用.attr（）和.prop（）来获取/设置值。使用.val（）方法（尽管使用.attr（“value”，“somevalue”）将继续工作，就像在1.6）之前一样。
http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

看起来你是上次jQuery更新的受害者，它只在属性名称为“value”时出现。

但是，我对修复的建议将保持不变。

Answer 4

user_profile是user_result的父元素吗？

如果是这样，那么当你点击并重新加载该html时，事件处理程序将被删除，你将不得不使用live http://api.jquery.com/live/

我个人也会使用一个类而不是一个id来点击例如 .....

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

jQuery使用click（）分配变量

4 个答案: