Question

如何在ajax加载内容函数上使用我的悬停函数？

............................................... .................................................. .................................................. ..................

首先，当我加载页面content.php时，将鼠标悬停在cat图像上，它将显示悬停文本。

但是当我使用index.php调用内容时，悬停不起作用，我该怎么办？

的index.php

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<title>ThaiCreate.Com Ajax Tutorial</title>
<script language="JavaScript">
       var HttPRequest = false;

       function doCallAjax(ID) {
          HttPRequest = false;
          if (window.XMLHttpRequest) { // Mozilla, Safari,...
             HttPRequest = new XMLHttpRequest();
             if (HttPRequest.overrideMimeType) {
                HttPRequest.overrideMimeType('text/html');
             }
          } else if (window.ActiveXObject) { // IE
             try {
                HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                try {
                   HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
             }
          } 

          if (!HttPRequest) {
             alert('Cannot create XMLHTTP instance');
             return false;
          }

          var url = 'content.php';
          var pmeters = "tID="+ID;

            HttPRequest.open('POST',url,true);

            HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            HttPRequest.setRequestHeader("Content-length", pmeters.length);
            HttPRequest.setRequestHeader("Connection", "close");
            HttPRequest.send(pmeters);


HttPRequest.onreadystatechange = function() {

     if(HttPRequest.readyState == 3)  // Loading Request
      {
       document.getElementById("mySpan").innerHTML = "<?PHP // ใส่ loading image ตรงนี้ ถ้าต้องการ<div>Now is Loading...</div> // ?>";
      }

     if(HttPRequest.readyState == 4) // Return Request
      {           
          document.getElementById('mySpan').innerHTML = HttPRequest.responseText;

          $('#mySpan div').hide();

          $('#mySpan div').each(function(index){
             $(this).delay(50*index).fadeIn(500);
          });
      }             
}

       }
    </script>
</head>
<body Onload="JavaScript:doCallAjax('');">
    <span id="mySpan" style=" float: left; "></span>
</body>
</html>

content.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<style type="text/css">
.love{ background: none; position: absolute; right: 13px; top: 186px; border: none; width: 16px; height: 16px; padding: 3px 4px; }
.love:hover{ background: #000; }
</style>

<!--[if IE 7]>
<style type="text/css">
.love{ background: none; position: absolute; right: 13px; top: 186px; border: none; width: 16px; height: 16px; padding: 3px 4px; }
.love:hover{ background: #fff; position: absolute; right: 13px; top: 186px; border: none; width: 16px; height: 16px; padding: 3px 4px; }
</style>
<![endif]-->

<style type="text/css">
.love-box_outer_16{
    left: 25px;
    top: 13px;
    z-index: 999;
    filter: alpha(opacity = 0);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    color: #fff;
    font-weight: bold;
    width: 117px;
    text-align: center;
    font-size: 12px;
    font-family: lato;
    padding: 10px 0px;
    position: absolute;
    margin: 0px;    
    background-color: #000;
    /* easy rounded corners for modern browsers */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;    
    cursor: pointer;
}

.love-box_inner_16{
    left: 141px;
    top: 21px;
    z-index: 10000;
    filter: alpha(opacity = 0);
    opacity: 0;
    position: absolute;
    margin: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #000;
    border-right: 0;
    border-bottom: 10px solid transparent;
    padding: 0;
    width: 0;
    height: 0;
    /* ie6 height fix */
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}
</style>
<div style="float: left; height: 20px; position: relative; width: 229px;">
<script type="text/javascript">
$(document).ready(function(){

    $("#16").hover(
        function(){
            var id = $(this).data("id");
            if(id!==undefined){
             $("#" + id).show();   
            }
            $(".love-box_outer_16").stop().animate({left: '45px' , opacity: 1}, 100); 
            $(".love-box_inner_16").stop().animate({left: '161px' , opacity: 1},100); 

        },function(){
            $(".love-box_outer_16").stop().animate({left: '25px' , opacity: 0}, 100); 
            $(".love-box_inner_16").stop().animate({left: '141px' , opacity: 0},100); 


        });
});
</script>
<div id="love-box" class="love-box_outer_16">
    hover cat images.
</div>
<div class="love-box_inner_16"></div>
<a class="unlike" style=" cursor: pointer; " id="16">
    <div class="love" id="love-trigger_16" style=" border-radius: 3px; 
                                                   padding: 8px; 
                                                   border: 1px solid #ccc; 
                                                   right: -107px; 
                                                   background: #fff; 
                                                   top: 13px; 
                                                   width: auto;
                                                   height: auto;">
      <img src="https://pbs.twimg.com/profile_images/378800000606281941/0e7e643dd2ede2a9d00759baa6078846.jpeg" style="border:none; width:141px;">            
    </div>
</a>
</div>

Answer 1

jQuery处理程序不会动态附加到定义后加载的内容。

您需要委派您的事件处理程序。就这样：

$(document).on("hover", "#16", function
...

而不是

$("#16").hover(

如何使用我的悬停功能与ajax加载内容功能？

1 个答案: