[解決済み] Bootstrapのモーダルで、特定のフィールドにフォーカスを設定する方法（表示後

質問

bootstrapのモーダルに関する質問をいくつか見かけましたが、これと全く同じものはありませんでしたので、先に進みます。

私は、このようにonclickを呼び出すモーダルを持っています...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

これはうまくいくのですが、モーダルを表示するときに、最初の入力要素にフォーカスを当てたいのです...。この場合、最初の input 要素の ID は #photo_name です。

そこで、試しに

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

しかし、これは無駄でした。最後に、「show」イベントにバインドしてみましたが、それでも入力はフォーカスされません。最後に、js の読み込み順の問題ではないかと思い、setTimeout を入れて、1秒遅らせたらフォーカスが当たるか試してみたところ、ちゃんと当たりました。しかし、この方法は明らかにくだらないものです。setTimeoutを使用せずに、下記と同じ効果を得る方法はないでしょうか？

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

解決方法は？

これを試してみてください

以下は、古い DEMO :

EDITです。 (以下は、動作中の デモ Bootstrap 3 と jQuery 1.8.3 を使用)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

bootstrap 3 からは、show.bs.modal イベントを使用する必要があります。

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})