動態添加的DIV上的jQuery Hide（）函數問題

我有一個表格，當我將鼠標懸停在表格的特定列上時，我收到了工具提示。當我將鼠標指針移動到另一個區域時，即使我已經編寫隱藏工具提示的代碼，工具提示仍然保留。以下是代碼。我在做什麼錯？我不使用任何插件。計劃使用，但想訴諸於插件之前嘗試一次。動態添加的DIV上的jQuery Hide（）函數問題

<script> 
      $(function() { 
       $(".content-cardnumber").mouseover(function (event) { 
        createToolTip(event); 
       }).mouseout(function() { 
        $("#popup").hide(); 
       }); 
      }); 
      function createToolTip(event){ 
       $('<div class="tooltip" id="popup">Cardnumber<div>').appendTo('body'); 
       var tPosX = event.pageX - 10; 
       var tPosY = event.pageY - 10; 
       $('div.tooltip').css({ 'position': 'absolute', 'top': tPosY, 'left': tPosX }); 
      } 
     </script>

這就是html的樣子。

<tr> 
        <th class="content-cardnumber">Card Number</th> 
        <th class="content-eventcode">Event Code</th> 
        <th class="content-origintime">Event Time</th>    
       </tr> 

       @foreach (IEvent e in Model.EventList) 
       { 
        <tr class="events-row"> 
         <td title="Test" class="content-cardnumber">@e.CardNumber</td> 
         <td class="content-eventcode">@e.EventCode</td> 
         <td class="content-origintime">@e.EventOriginTime</td> 

        </tr> 
       }

來源

2013-07-07 ckv

第一件事情，看看有沒有什麼事件被解僱，添加一個'的console.log（ '鼠標移出'）;'以上'$（「＃彈出」）就行了。 hide（）;'看看你是否已經寫在你的瀏覽器控制檯中！ - 而且，你是否使用任何插件，Bootstrap [Popup]（http://twitter.github.io/bootstrap/javascript.html#popovers）（甚至是[Tooltip]（http://twitter.github.io/bootstrap） /javascript.html#tooltips））真的很棒，你甚至不需要JavaScript來觸發事件。 – balexandre

你createToolTip功能創建新div和將其附加到body的每個mouseover事件上，但是mouseout你不是刪除該div來自DOM但簡單地它隱藏它。所以你最終得到了很多工具提示div（全部使用相同的id），這就是爲什麼你的hide不起作用。

另外，您在$('<div class="tooltip" id="popup">Cardnumber<div>')中有一個錯字，應該是$('<div class="tooltip" id="popup">Cardnumber</div>')。

嘗試：第一

$(function() { 
       $(".content-cardnumber").mouseover(function (event) { 
        showToolTip(event); 
       }).mouseout(function() { 
        $("#popup").hide(); 
       }); 
      }); 
      function showToolTip(event){ 
       if ($('#popup').length == 0) 
        $('<div class="tooltip" id="popup">Cardnumber</div>').appendTo('body'); 
       var tPosX = event.pageX - 10; 
       var tPosY = event.pageY - 10; 
       $('div.tooltip').css({ 'position': 'absolute', 'top': tPosY, 'left': tPosX }).show(); 
      }

來源

2013-07-07 08:14:57 haim770

當我嘗試這個工具提示只是第一次，但它確實消失了，當我改變焦點。 :( – ckv

我修改了我的答案，在設置工具提示的css（）後添加了'show（）'。 – haim770

使用mouseenter和mouseleave代替mouseover，mouseout。

mouseover如果將光標移動到.content-cardnumber元素內，則會調用事件處理程序。這將創建許多div s。

來源

2013-07-07 08:09:51 falsetru

您是否使用id「popup」創建多個工具提示？檢查生成的源代碼，因爲這會破壞它（我認爲）

來源

2013-07-07 08:10:50 openquestions

的問題是：當你準備好文檔後的股利彈出犯規存在

<script> 
     $(function() { 
      $(".content-cardnumber").mouseenter(function (event) { 
       createToolTip(event); 
      }).mouseleave(function() { 
       hideTooltip();///try this 
      }); 
     }); 
     function createToolTip(event){ 
      $('<div class="tooltip" id="popup">Cardnumber<div>').appendTo('body'); 
      var tPosX = event.pageX - 10; 
      var tPosY = event.pageY - 10; 
      $('div.tooltip').css({ 'position': 'absolute', 'top': tPosY, 'left': tPosX }); 
     } 

function hideTooltip(){ 
    $("#popup").remove(); 
} 
</script>

來源

2013-07-07 08:11:28

動態添加的DIV上的jQuery Hide（）函數問題

回答

相關問題