以下のto_roomをクリックするとmake_roomのフォームをsubmitする、という処理を書きたい。
全体がforeachで囲まれているため、単純にセレクタを指定しても全要素に対して適切にイベントを設定するのが難しそう。
@foreach($friends as $friend)
<div class="to_room">
<form method="post" action="{{ url('/room') }}" class="make_room">
<input type="hidden" name="id" value="{{$friend->id}}">
<input type="submit" name="submit" value="メッセージを送る">
</form>
</div>
@endforeach
結論としてはeachを使って以下のように指定する
//eachを使うことでそれぞれの要素に対してイベントを設定出来る
$(".to_room").each(function(){
$(this).click(function(){
//.childrenを使ってフォームを指定することでクリックした要素の子要素に当たるフォームのみsubmit出来る
var form = $(this).children('.make_room').submit();
});
});
注意するポイントとしては、
セレクタにidを指定せずclassを指定すること。
idを使った場合一番最初の要素のみにしかイベントが設定されなくなってしまう。
以上。