jQueryコードを追加するためにpartialView要素をDOMに挿入する方法は？

Question

私が持っているpartialView：

<table class="table table-bordered table-condensed table-hover table-striped"> 
    <thead> 
     <tr> 
      <th>Trip Id</th> 
      <th>Start Time</th> 
      <th>End Time</th> 
      <th>Actual Distance</th> 
      <th>Air Distance</th> 
      <th>Avg Speed</th> 
      <th>Max Speed</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr class="trip" data-id="@item.TripId" data-url="@Url.Action("","")"> 
       <td>@item.TripId</td> 
       <td>@item.StartTimeStamp</td> 
       <td>@item.EndTimeStamp</td> 
       <td>@item.ActualDistance</td> 
       <td>@item.AirDistance</td> 
       <td>@item.AvgSpeed</td> 
       <td>@item.MaxSpeed</td> 
      </tr> 
     } 
    </tbody> 
</table> 

jQueryの​​機能を使ってロードされます。

$(".trip").click() 

方法：しかし、私はそれが私のsite.js内部でこのようにロードされたとき.tripクラスは負荷前にDOMに追加されていないファイル、したがって、私は反応する任意のコードを書き込むことができないことを発見しましたこの問題を解決できますか？

NB：私はpartialViewをロードするために私site.js

編集

スニペット内のすべての私のJavascript/jQueryのコードを持っている：

$("#TripPartial").slideUp('200', function() { 
    $('#TripPartial').load(_this.data('url'), { id: _this.data('id') }, function() { 
     $("#TripPartial").slideDown('200'); 
    }); 
}); 

Answer 1

あなたが追加された要素のためevent delegationを使用する必要があります動的に

あなたは.on()メソッドを使用してclickイベントハンドラをバインドする必要があります。

イベントの代表団は、私たちはそれらの子孫が現在存在しないか 将来的に追加されているかどうか、 セレクタに一致するすべての子孫のために発生します 親要素に、単一のイベントリスナーをアタッチすることができます。

$(document).on('click','.trip',function(){ 

});