Question

我正在使用asp.net 3.5

我有一个jquery函数，可以在'hover'事件中正常工作。

浏览器刷新一些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()，因为ASP.NET AJAX调用会在AJAX面板中收到新的HTML时删除已经附加的事件处理程序。

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

ajax回调后，jquery函数不起作用

1 个答案: