web-dev-qa-db-ja.com

jquery <a>タグクリックイベント

検索時にユーザー情報を表示するコードを作成しています。ユーザー情報は、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>
_
jqueryhtmlajaxpost
13
Maverick
<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
})

//他の方法はデータ属性を使用することです

<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");
})
36
gfivehost

これは、非表示フィールドの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はありません。それらは問題を引き起こします。それらはinvalid、badであり、notしないでください。

5
karim79

フィールドセット内のすべての非表示フィールドは同じIDを使用しているため、jqueryは最初のフィールドのみを返します。これを修正する1つの方法は、カウンター変数を作成し、各隠しフィールドIDに連結することです。

2
Stephen Curial