th 태그 내에서 호버 효과가 작동하지 않습니다.

Question

아이콘에 마우스를 올려 놓고 meesagebox의 속성을 기반으로 데이터를 표시하는 툴팁 기능을 연구 중입니다. 아래 코드는 mouseenter 이벤트에 사용됩니다.

<span class='csTip fa fa-info-circle' csTipTerm='Agreed Bid' ></span> 

만약 내가 그것을 넣으면 그것은 작동하지만, 테이블 태그에 그것의 호버 이벤트가 작동하지 않습니다. 아래는 코드를 넣은 후의 코드입니다.

<th>Agreed Bid <span class='csTip fa fa-info-circle' csTipTerm='Agreed Bid' ></span> </th> 

스크립트

$(".csTip").mouseenter(function() { 
    var element = $(this); 
    var term = element.attr("csTipTerm"); 
    $.ajax({ 
     url: "/api/help/gettipdetails", 
     dataType: "json", 
     data: { 
      tipTerm: term 
     }, 
     success: function (result) { 
      var offsets = element.offset(); 
      var posTop = offsets.top; 
      var posLeft = offsets.left; 
      HelpBox(result.TipID, result.TipTitle, result.HelpDescriptionHTML, { left: posLeft, top: posTop - 200 }); 
     } 
    }); 
}); 

누군가가 이것에 안내시겠습니까?

Answer 1

는

$("table th .csTip").mouseenter(function() { 
    var element = $(this); 
    var term = element.attr("csTipTerm"); 
    $.ajax({ 
     url: "/api/help/gettipdetails", 
     dataType: "json", 
     data: { 
      tipTerm: term 
     }, 
     success: function (result) { 
      var offsets = element.offset(); 
      var posTop = offsets.top; 
      var posLeft = offsets.left; 
      HelpBox(result.TipID, result.TipTitle, result.HelpDescriptionHTML, { left: posLeft, top: posTop - 200 }); 
     } 
    }); 
}); 

Answer 2

Demo Link

이 시도하십시오 :

$("#outer").mouseenter(function() { 
    $(".csTip").append("<div>Handler for .mouseenter() called.</div>"); 
});