image - クリック時のjquery画像の境界線

Question

なぜこれが機能しないのですか？

$(".char").click(function() {
   $(this).css('border', "solid 2px red");  
   });

<img class=char src=1.gif>
<img class=char src=2.gif>

画像の1つをクリックすると、境界線で強調表示されます。

また、一度に 1 つだけ強調表示したいのですが、後で確認します。

Answer 1

$(document).ready() を使用 - 現在の jquery コードは、対象の html 要素が dom で使用可能になる前に実行されます

<script type="text/javascript">
$(document).ready(function() {
    $(".char").click(function() {
        $(this).css('border', "solid 2px red");
    });
});
</script>