如何用按钮关闭主页中的ajaxi页面

How to close an ajaxi page in main page with a button?

本文关键字：ajaxi 页面 主页 何用 按钮      更新时间：2023-09-26

我有两页。在第一个页面中，我有一个div（ajaxycall），在这个div中，加载了另一个页面。

我的问题是，当我点击第二页中的"关闭"并再次显示第一个div的容器时，如何关闭第二页？tnx

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
  <div class="ajaxicall">
    <span id="addtobasketspan">First Div</span>
    <img src="images/shopping-cart-xxl.png"/>
  </div>
<script>
  $("#addtobasketspan").click(function(e) {
    $.ajax({
       url:'secondpage.html',
       type:'get',
       data: 'lid=1',
       success:function(data){
          $("ajaxicall").load('secondpage`enter code here`.html');
       }
  });
});
</script>
</body>
</html>

jsFiddle：https://jsfiddle.net/acc33fm3/

jQuery

$("#addtobasketspan").click(function(e) {
  $.ajax({
    //url: 'secondpage.html',
    type: 'get',
    data: 'lid=1',
    success: function(data) {
      //$(".second-div").load('secondpage`enter code here`.html');
      $(".second-div").append('<button class="close-div">X</button>');
    }
  });
});
$(document).on("click", ".close-div", function() {
  $(this).closest('div').hide();
});

只需在您的ajax页面中附加一个按钮，然后使用它来简单地隐藏ajax div

您应该在第二个页面中有一个元素，比如关闭按钮来关闭该页面，并使第一个页面看起来默认。它可以像；

<a href="#" id="close">close</a>

您可以将代码绑定到类似的id；

$("#close").click(function(){
    $('#ajaxicall', window.parent.document).html('
        <span id="addtobasketspan">First Div</span>
        <img src="images/shopping-cart-xxl.png"/>
    ');
});
相关文章：