Question

<div data-role="page" id="leavebal_page" class="home_page_style" style="position:fixed; overflow:hidden;">
            <div data-role="content" id="leavebal_page_content"style="overflow:hidden;margin: 0;
                padding: 0;" >
                <div id="leavebal_header" style="width: 100%; margin: -2%; height:12.5%;">
                    <h4 style="text-align: center; color: white;line-height: 3;">AppName</h4>
                    <a href="#menupanel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars ui-corner-all ui-shadow ui-nodisc-icon" style="background: transparent;">Menu</a>
                    <a href="#" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-arrow-l ui-corner-all ui-shadow ui-nodisc-icon" style="background: transparent;" onclick="changePageForHome();">Back</a>
                </div>
                <hr style="width:100%; margin-top:-9%;">
                <div id="leave_query" class="open_tab_bckgrnd" style="margin-top: -6%;">
                     <h6 style="background-color:#D3D3D3;text-align:center;height:6%;color: #C32036;text-shadow: none;font-size: 18px;font-weight: normal;position: relative;top: 2%;">Leave Balance</h6>
                    <div data-role="collapsible-set" id="leavebalstatus">
                        
                    </div>
                </div>
            </div>
            
        </div>

我想在每次离开页面时清除以前的数据。我用过.empty（）＆amp; html（''）为此但它不起作用。请帮帮我。

这是我的代码 -

$("#leavebalstatus").html(" ");
$("#leavebalstatus").empty();

      var leaveBallist= '';
for( i=0; i<getLeaveBal.length;i++){
              leavebalgrp_name =  getLeaveBal[i].find('Leave_Group_Name').text();
              leavebal_code = getLeaveBal[i].find('Leave_Type_Code').text();
              leavebal_name =   getLeaveBal[i].find('Leave_Name').text();

              leaveBallist += '<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" style="background:white;" id="leaveBalMainData"><h3 style="margin-bottom:2%;"><div style="width:100%;" id="leaveBal_contaner"><p style="display:inline-block;width:35%;background: red;text-align:center; color:white;">'+leavebal_name+'</p><p style="display:inline-block;width:60%; margin-left:5%;">'+leavebalgrp_name+'</p></div></h3>';

              for(k=0; k<collapseArray.length;k++){
             if (i == k){

            leaveBallist += '<p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block;float:left;">Entitled</span><span style="width:33%; dispaly:inlne-block;float:left;">Availed</span><span style="width:33%; dispaly:inlne-block;float:left;">Balance</span></p><p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveEntitled').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveAvailed').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveBal').text()+'</span></p>';
             }

           }
              leaveBallist += '<p style="width:100%;"><hr style="width:100%;"></p><p style="width:100%;"><span style="color:red; width:100%;font-size:16px;margin-left:42%" onclick="applyLeaveForBal('+i+');">APPLY</span></p></div>';
          }

                  $('#leavebalstatus').html(leaveBallist);
    //   $('#leavebalstatus').collapsible();
       $('#leavebalstatus').collapsibleset( "refresh" );
       $('#leavebalstatus').trigger("create");

用于清除我尝试调用的页面中的数据

$(document).on("pagehide", "#leavebal_page", function(event, ui){
                           alert(event.target);
                           $('#leavebalstatus').empty();
                           $('#leavebalstatus').html('');
                                           });

但两者都不起作用。谢谢你们的帮助

Answer 1

这是因为即使在代码段中的以下代码清空了值之后您又在重新创建值：

         $('#leavebalstatus').collapsibleset( "refresh" );
         $('#leavebalstatus').trigger("create");

该值被清空但最后再次刷新并创建。

您应该设置一个标志来检查是否发生了网页隐藏事件，如果没有发生，则执行上面两个不执行。

Answer 2

您可以尝试以这种方式删除：

$("#leavebalstatus").children().remove();

我希望这可以帮到你！

Answer 3

document.getElementById("#leavebalstatus").reset();

Answer 4

我无法确定我所说的内容而不进行测试，但也许它可以提供帮助。上周我和Bootstrap一起工作，当我在某些情况下试图清理它时，我遇到了一个模态问题。

事情是，在某些情况下，Bootstrap再次创建模态作为身体的直接孩子。所以，当我调用空函数时，它指向其他地方。

我的建议是评估alert($('#leavebalstatus').length)为@AlenaKastsiukavets在评论中说，但将leavebalstatus id更改为一个类，这样jQuery在选择多个对象时没有问题。

最后，我通过将模态作为身体的直接孩子来解决它，但很明显，你需要的解决方案很可能会有所改变。

清除动态可折叠列表，empty（）html（“”）不起作用

4 个答案: