jQuery on（）を使用したクリックイベントをAjax経由で注入されたHTMLで呼び出さない

Question

データ型がhtmlのAjax呼び出しで返される部分的なビューがあります。このhtml内部にはIDを持つアンカータグがありますこれは、jQueryの.on() APIとフレームワークのバージョン1.7.1を使用してクリックイベントを配線しています。簡潔の便宜上

、次のように部分図である想像：私はインターセプト部分図結果として上記を返すMVCコントローラのアクションに標準$.ajax POSTを介して

<div id="container" class="modal-dialog"> 
    <h1>Heading</h1> 
    <a id="thelink" href="#"> 
     <img src="<%:Url.Content("~/Path/To/Image.jpg")%>" /></a> 
</div> 

..andとモーダルダイアログに吐き出す。

私は次のようにルックスをフックアップしようとしているイベントコード：

今

$(function() { 
    $("#thelink").on("click", function (e) { 
     e.preventDefault(); 
     $("#jquery-ui-dialog-box").dialog("close"); 
    }); 
}); 

、私はlive()にon()を切り替えた場合は、 - すべてが期待どおりに動作します。 IE8（IE8標準モード）では上記のコードではイベントが発生しません - ブレークポイントにヒットしない場合、jQuery UIモーダルは上の例のように閉じません。 live()を呼び出すと、すべて正常に動作します。

これは私が今まで（上の行動との差を見てきた最初で唯一の時間である）、および非推奨または「ロールアップ」イベントバインディングAPI（デリゲート、生きる、バインド）

ノー持っていますlive()またはdelegate()を使用することに戻って問題が発生しましたが、これが可能な場合、なぜこれが発生しているのか理解したいと思います！

よろしく SB

Answer 1

$(foo).live(type, handler)は$(document).on(type, foo, handler)に相当し、その代わりに次のことを試してください。

$(function() { 
    $(document).on("click", '#thelink', function (e) { 
     e.preventDefault(); 
     $("#jquery-ui-dialog-box").dialog("close"); 
    }); 
}); 

live()の署名は混乱します。実際には選択された要素にハンドラーをバインドするのではなく、指定されたセレクター（How does jQuery .live() work?）に一致する要素で発生するイベントをリッスンするdocument要素にバインドします。

$(foo).live(type, handler)は、$(document).delegate(foo, type, handler)に相当します。

$(foo).delegate(selector, type, handler)をon()に変換するには、最初のパラメータと2番目のパラメータを交換するだけです。 on()は、イベントタイプを最初にとし、（オプションの）セレクタとします。