onClickメソッド
# First Last Handle 編集
1 James Smith @james
2 John Williams @john
3 Robert Brown @robert
4 Michael Miller @michael
5 William Taylor @william

例えばユーザリストに対して各ユーザごとに送信するデータが異なる場合、onClick()を使用すればいちいち JQuery の on メソッドを記述せずにすみ、全体のコード量を減らすことができます。

onClick() にクリックに対応するタグの ID および送信するデータを指定します。

第3引数を true とした場合は、指定された ID の :hover(マウスオーバー)がクリッカブルになります。

タグの ID がボタンである必要はありません。

レスポンスデータを使ってなんらかの処理をしたい場合はこちら


サンプルでは各ユーザの行をクリックすると GET でユーザ番号が送信され、鉛筆マークをクリックすると POST でユーザデータを送信するようになっています。

4番目以外のレコードは、hover に true を指定しているため、マウスオーバーでマウスの形状が変わります。

Script Source

var getAjax = new PRAjax("response.php", "get");
getAjax.onClick("#id_list1", {"no":1}, true);
getAjax.onClick("#id_list2", {"no":2}, true);
getAjax.onClick("#id_list3", {"no":3}, true);
getAjax.onClick("#id_list4", {"no":4});
getAjax.onClick("#id_list5", {"no":5}, true);

var postAjax = new PRAjax("response.php", "post");
postAjax.onClick("#id_icon1", {"no":1, "First":"テスト1", "Last":"テスト1"}, true);
postAjax.onClick("#id_icon2", {"no":2, "First":"テスト1", "Last":"テスト1"}, true);
postAjax.onClick("#id_icon3", {"no":3, "First":"テスト1", "Last":"テスト1"}, true);
postAjax.onClick("#id_icon4", {"no":4, "First":"テスト1", "Last":"テスト1"});
postAjax.onClick("#id_icon5", {"no":5, "First":"テスト1", "Last":"テスト1"}, true);

HTML
<tr id="id_list1">
 <th scope="row">1
 <td>James
 <td>Smith
 <td>@james
 <td><i id="id_icon1" class="bi bi-pencil">
</td>