2013-10-24 73 views
0

我有此代码生成动态使用PHP代码: -jQuery的.hide()和.show()不工作

<div class="mailList" id="M_6"> 
    <div class="mailListHeader" id="H_6"> 
     <img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif"> 
     Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br> 
     Subject: <strong>Test Mail</strong><br> 
    </div> 

    <div class="mailListContent" id="C_6"> 
     <div class="closeContent" id="CC_6">Close [x]</div> 
     <span id="SPAN_6"></span> 
    </div> 

    <div class="mailListFooter" id="F_6"> 
     <span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;"> 
      View Content 
     </span> 
     <span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;"> 
      Successfull-[0] Failed-[4] 
     </span> 
    </div> 
</div> 

然后,用户可以点击视图内容Successfull- [0]失败 - [4]这将使ajax请求比显示结果在div mailListContent。下面是jQuery的AJAX请求代码: -

$(".mailContentBtn, .mailListBtn").click(function(){ 
    var currentId = $(this).attr('id'); 
    currentId = currentId.split("_"); 
    var actualId = currentId[1]; 

    if($("#C_"+actualId).is(":visible")) { 
     $("#C_"+actualId).hide("slow","swing"); 
    } 
    $("img#LOADER_"+actualId).show(); 

    if(currentId[0]=="MCBTN") { 
     var dataString ="action=getMailContentByID&mailID="+actualId; 
    } else { 
     var dataString ="action=getMailListByID&mailID="+actualId; 
    } 

    $.ajax({ 
     type: "POST", 
     url: "include/getMail.php", 
     data: dataString, 
     cache: false, 
     async: false, 
     success: function(html) { 
      $("#SPAN_"+actualId).empty(); 
      $("#SPAN_"+actualId).append(html); 

      $("#C_"+actualId).show("slow","swing"); 
      $("img#LOADER_"+actualId).hide(); 
     } 
    }); 
}); 

的请求和事件工作正常,问题出在查看内容Successfull- [0]失败 - [4]每次用户点击加载图像不显示。正如你所看到的,我给每个加载图像一个唯一的ID,而不是只有一个加载图像显示在clik上。 Google Chrome中的检查代码没有错误。我该如何解决这个问题?

谢谢。

回答

3

在调用$ .ajax时,将“async”选项更改为“true”。因为在你的情况下,$ .ajax会在加载图像同步执行时阻塞UI线程。

+0

意外的解决方案。好简单。我甚至不认为异步:假造成这个问题。谢谢。 :) – errorare

0

您已经错过了:

$(document).ready(function() { 
}); 

试试这个:

<script> 
     $(document).ready(function() { 
      $(".mailContentBtn, .mailListBtn").click(function() { 
       var currentId = $(this).attr('id'); 
       currentId = currentId.split("_"); 
       var actualId = currentId[1]; 

       if ($("#C_" + actualId).is(":visible")) 
        $("#C_" + actualId).hide("slow", "swing"); 

       $("img#LOADER_" + actualId).show(); 

       if (currentId[0] == "MCBTN") { 
        var dataString = "action=getMailContentByID" + 
          "&mailID=" + actualId; 
       } 
       else { 
        var dataString = "action=getMailListByID" + 
          "&mailID=" + actualId; 
       } 

       $.ajax({ 
        type: "POST", 
        url: "include/getMail.php", 
        data: dataString, 
        cache: false, 
        async: false, 
        success: function (html) { 
         $("#SPAN_" + actualId).empty(); 
         $("#SPAN_" + actualId).append(html); 

         $("#C_" + actualId).show("slow", "swing"); 
         $("img#LOADER_" + actualId).hide(); 
        } 
       }); 
      }); 
     }) 


    </script> 
+0

我已经有$(document).ready(function(){ });在我的页面。对不起,迟到回应。 – errorare