如何将partialView元素“注入”到DOM中以添加jQuery代码？

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 .load()函数加载。但是我发现当在我的site.js文件中加载它时，.trip类在加载之前没有添加到DOM，因此我无法编写任何响应的代码：

$(".trip").click()

如何解决此问题？

注意：我的site.js内有我所有的Javascript / jQuery代码

修改

用于加载partialView的代码段：

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

Answer 1

您应该将event delegation用于动态添加的元素。

您应该使用click方法绑定.on()事件处理程序。

  

事件委托允许我们将单个事件监听器附加到   父元素，将为匹配a的所有后代触发   选择器，无论这些后代现在存在还是被添加到   将来

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

});