【问题标题】:jquery <a> tag click eventjquery <a> 标签点击事件
【发布时间】:2011-05-16 17:17:56
【问题描述】:

我正在构建一个在搜索时显示用户信息的代码。用户信息,然后显示在fieldset 中,以及图像、名字、姓氏和一些个人资料信息。显示,在fieldset 的底部,有一个添加为好友的超链接:

<a href="#" id="aaf">add as friend</a>

现在我想使用 jquery $post() 方法与另一个页面进行交互。我在该用户 fieldset 内还有一个隐藏字段,其中包含用户 ID 值。现在,当我使用jquery 创建点击功能时,我无法访问不同的隐藏字段值。现在我想知道如何实现这个功能?为了检查我是否可以在一组代码中获取隐藏字段的值,我这样做了。

$(document).ready(function () {
    $("a#aaf").bind('click', function () {
        alert($("#uid").val());
    });
});

但我只得到第一个 fieldset 的值,而不是其他值。请指导我。

提前致谢。

编辑:如何在每个标签点击事件中获取它?我在这里放了更多代码,

<?php foreach($query->result() as $row){?>
<fieldset>
    <legend>
        <?php echo $row->firstname.' '.$row->lastname;?>
    </legend>
    <img src='<?php echo $row->profile_img_url;?>'/><br>
    <a href="#" id="aaf">add as friend</a>
    <input name="uid" type="hidden" value='<?php echo $row->uid;?>' id="uid">
</fieldset>

【问题讨论】:

    标签: jquery html ajax post


    【解决方案1】:
    <a href="javascript:void(0)" class="aaf" id="users_id">add as a friend</a>
    

    在 jquery 上

    $('.aaf').on("click",function(){
      var usersid =  $(this).attr("id");
      //post code
    })
    

    //其他方法是使用data属性

    <a href="javascript:void(0)" class="aaf" data-id="102" data-username="sample_username">add as a friend</a>
    

    在 jquery 上

    $('.aaf').on("click",function(){
        var usersid =  $(this).data("id");
        var username = $(this).data("username");
    })
    

    【讨论】:

    • 注意 .live() 在最新的 jQueries 中被贬值了。请改用 .on()。
    【解决方案2】:

    那是因为你的隐藏字段有重复的 ID,所以 jQuery 只返回集合中的第一个。而是给他们上课,比如.uid 并通过以下方式获取他们:

    var uids = $(".uid").map(function() {
        return this.value;
    }).get();
    

    演示:http://jsfiddle.net/karim79/FtcnJ/

    编辑:假设您的输出如下所示(注意,ID 已更改为类)

    <fieldset><legend>John Smith</legend>
    <img src='foo.jpg'/><br>
    <a href="#" class="aaf">add as friend</a>
    <input name="uid" type="hidden" value='<?php echo $row->uid;?>' class="uid">
    </fieldset>
    

    您可以像这样定位相对于单击的锚点的“uid”:

    $("a.aaf").click(function() {
        alert($(this).next('.uid').val());
    });
    

    重要提示:不要有任何重复的 ID。它们会引起问题。它们是无效不好,你不应该这样做。

    【讨论】:

    • 好的,我会试试这个,然后让你们知道。谢谢。
    【解决方案3】:

    您的字段集中的所有隐藏字段都使用相同的 id,因此 jquery 只返回第一个。解决此问题的一种方法是创建一个计数器变量并将其连接到每个隐藏字段 id。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-08-24
      • 2015-03-11
      • 1970-01-01
      • 2013-06-15
      • 2020-11-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多