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();
    });
});