ajax回调后jquery函数不起作用

Question

我正在使用 asp.net 3.5

我有一个在“悬停”事件上运行良好的 jquery 函数。

浏览器刷新某些 div 后出现问题 使用 ajax 调用。

从那时起浏览器忽略 悬停事件并且不调用 jquery 函数。 刷新页面后才恢复正常。

* 进行我正在使用的 ajax 调用

<asp:UpdatePanel ID="UpdatePanel4"  runat="server" UpdateMode="Always">
         <ContentTemplate runat="server">
            <div id='map' runat="server"></div>                        
          </ContentTemplate>
 </asp:UpdatePanel>

--这是jquery函数--

$(function() {
  $('a.trigger').hover(function() {

    var index = $(".trigger").index(this);

  var pop=document.getElementById("pop_up");

  var place=document.getElementsByClassName('place')[index ];

  var car_id=document.getElementsByClassName('car_id')[index];
  var enter_time=document.getElementsByClassName('time')[index ];
  pop.innerHTML="Park At: "+place.innerHTML+"</br>Car Id:"+car_id.innerHTML+"</br>Enter At:"+enter_time.innerHTML;

    $('div#pop_up').show();
  }, function() {
    $('div#pop_up').hide();
  });
});

--这是ajax回调后没有响应的div--

<div id="pop_up" runat="server">
    <p  id='who_parks_here' runat="server"></p>
</div>

Answer 1

您必须使用.on()，因为当在 AJAX 面板中收到新的 HTML 时，ASP.NET AJAX 调用会删除已附加的事件处理程序。

$(function() {
    $(document).on('hover', 'a.trigger', function() {

        var index = $(".trigger").index(this);

        var pop = document.getElementById("pop_up");

        var place = document.getElementsByClassName('place')[index];

        var car_id = document.getElementsByClassName('car_id')[index];
        var enter_time = document.getElementsByClassName('time')[index];
        pop.innerHTML = "Park At: " + place.innerHTML + "</br>Car Id:" + car_id.innerHTML + "</br>Enter At:" + enter_time.innerHTML;

        $('div#pop_up').show();
    }, function() {
        $('div#pop_up').hide();
    });
});