淡出由Jquery

时间:2016-01-22 08:57:28

标签: javascript jquery html ajax jsp

我有一个jsp页面,列出了与客户有关的订单。单击订单号后,订单的详细信息将通过ajax请求显示给另一个jsp页面(从Oracle获取数据并返回HTMLtable)。这个HTML表在第一个jsp页面中作为div元素的innerHTML放置。

用户界面的屏幕截图如下:

List of orders with order no. 1 details

我希望当用户点击关闭时,详细信息屏幕应淡出。 close的id(HTML <font>标签)很接近。

我尝试了以下内容:

  1. $("#close").click(function(){
    $("#order_detail").fadeOut();
    });
    
  2. $("#close").on('click',function(){
    $("#order_detail").fadeOut();
    });
    
  3. 但两者都没有效果。如何在第一页上使用jquery操作Ajax返回的动态HTML表。

2 个答案:

答案 0 :(得分:0)

试试这个:

$("#close").on('click',function(){
  $("#order_detail").fadeOut("normal",function(){
   $("#order_detail").remove();
  });
});

答案 1 :(得分:0)

如你所说,这是一个由Ajax返回的动态HTML表格,我的猜测是你的jquery代码加载时,没有任何html标签的id为&#39; close&#39;所以jquery无法通过id 找到元素

您可以尝试使用调用javascript函数的标记中的onclick属性 喜欢

<a href="javascript:void(0)" id="close" onclick="close_ui();">close</a>

或将您的代码放入ajax请求中,例如

$.get('url', function(retObj){
      $('table').html(retObj);
      $("#close").on('click',function(){
           $("#order_detail").fadeOut();
      });

 })