logo标签列表

清空动态可折叠列表，empty() html(" ") 无效。

javascriptjqueryhtmljquery-mobile
5

<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() 和 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('');
                                           });

但两者都不能工作。谢谢帮助。
你只需要使用.empty()和.html("")中的一个；因为.html()的第一件事就是调用.empty()。 - Pointy
是的，你说得对，但在我的情况下两者都不起作用。这就是为什么我这样写，但还是没有运气。 - Apurva Agrawal
你能把代码片段放在这里吗？这样我们就可以了解它是如何工作的。 - trungk18
那么，警报显示了吗？ - Alena Kastsiukavets
你使用的是哪个版本的jquery mobile？从jquerymobile1.4.0开始，pagehide事件已被弃用。如果你使用的是> 1.4.0，请使用pagecontainerhide代替pagehide。请参阅文档http://api.jquerymobile.com/pagehide。 - Harish Kommuri
显示剩余14条评论
4个回答
3

这是因为即使在代码片段中使用以下代码清空值后，您仍在重新创建该值：

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

该值被清空，但最终又被刷新和创建。

您应该设置一个标记来检查页面隐藏事件是否发生，如果未发生则执行上述两个操作，否则不执行。

pagehide事件每次都会发生，而且您可以在我的代码中看到已经有这两行了。 - Apurva Agrawal
我赞同这个答案。您可能在进入页面时清除了要清除的元素，但是在几行下面，您又使用$('#leavebalstatus').html(leaveBallist);填充相同的元素。如果此操作很快执行，则永远看不到#leavebalstatus处于空状态。 - jmealy
谢谢 @jhonAtNotion，但我的问题是 leavebalstatus 每次调用函数时都会获取数据。 - Apurva Agrawal
1
您可以尝试使用以下方式进行删除：

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

我希望这可以帮助你！
它完全删除了页面。列表不是使用此方法创建的。@jcarrera - Apurva Agrawal
是的，我尝试过使用pagehide，但仍然没有成功。使用remove page content会完全删除页眉，而使用empty page content会删除内容，但当我再次访问页面时，页面不会被创建。 - Apurva Agrawal
但是 #leavebalstatus 是一个可折叠集合，对吧？如果您删除可折叠集合的子元素，那么您如何删除标题和页面内容呢？我有什么遗漏的吗？ :) - jcarrera
是的，它是可折叠集。我不知道发生了什么。在我的整个应用程序中，每个页面都像listview、可折叠listview、下拉列表、网格视图一样，每个屏幕都会出现同样的问题。是否有可能在每次调用函数时创建div？如何解决这个问题。从过去的4个@jcarrera。 - Apurva Agrawal
0
document.getElementById("#leavebalstatus").reset();
请详细阐述和扩展您的答案，并进行一些介绍和解释，否则您的答案可能会被删除，因为它是低质量的帖子。感谢您的理解。请阅读帮助部分，了解有关如何编写和回答的更多信息。 - Farside
1
谢谢你的建议，@Farside，我会记住的！ - Andre van Rensburg
André van Rensburg，但我的意思是 - 现在你必须明确地做到这一点，否则你的答案将再次进入审核队列，等待管理员处理。请根据最佳实践编辑您的答案。谢谢。 - Farside
0

我不能确定没有测试它，但也许它可以帮助。上周我在使用Bootstrap工作时，当我尝试在某些情况下清除模态时遇到了麻烦。

问题是，在某些情况下，Bootstrap会将模态窗口再次创建为body的直接子节点。因此，当我调用empty函数时，它指向了其他位置。

我的建议是按照 @AlenaKastsiukavets 在评论中所说的评估 alert($('#leavebalstatus').length) 但将 leavebalstatus id 更改为 class，这样 jQuery 就不会有选择多个对象的问题。

最后，我通过将模态窗口设置为 body 的直接子节点来解决它，但显然你需要的解决方案可能会略有不同。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接